Zmiana liniowego tła gradientowego po pewnym czasie

Question

Chcę zmienić tło po pewnym czasie. Jeśli tło ma "czysty" kolor, nie ma problemu, ale jeśli kolor jest gradientem, ponieważ kod nie działa. czy jest do tego jakieś zadanie?

background: -webkit-linear-gradient(rgba(39,49,67,1), rgba(226,228,209,1)); /*For Safari 5.1 to 6.0 */ 
background: -o-linear-gradient(rgba(39,49,67,1), rgba(226,228,209,1)); /*For Opera 11.1 to 12.0 */ 
background: -moz-linear-gradient(rgba(39,49,67,1),rgba(39,49,67,1), rgba(226,228,209,1)); /*For Firefox 3.6 to 15 */ 
background: linear-gradient(rgba(39,49,67,1),rgba(51,90,109,1),rgba(83,142,144,1), rgba(226,228,209,1)); /*Standard syntax */ 

jsfiddle dla normalnej zmiany koloru

Answer 1

To, co powiedział Dbugger, jest prawdą - nie można animować obrazu tła za pomocą animacji css.

Jednakże, można udawać gradientem 4 Stop (sprytnie pozycję kolor zatrzymuje - Proponuję za pomocą generatora gradientu jako Colorzilla lub podobny - sprawi, że praca jest łatwiejsza) - ponieważ gradient jest traktowany jako background-image, ty można animować jego położenie, używając background-position. Aby animować pozycję, musisz zwiększyć jej rozmiar, aby część gradientu znalazła się poza kontenerem.

Możesz użyć animation-delay, aby ustawić początkowe opóźnienie przed rozpoczęciem animacji.

html, body {width:100%;height:100%;margin:0;} 
 
div { 
 
    width: 100%; 
 
    height: 100%; 
 
    background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(118,191,36,1) 25%, rgba(224,117,35,1) 50%, rgba(242,38,42,1) 75%, rgba(130,100,70,1) 100%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(25%,rgba(118,191,36,1)), color-stop(50%,rgba(224,117,35,1)), color-stop(75%,rgba(242,38,42,1)), color-stop(100%,rgba(130,100,70,1))); 
 
    background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(118,191,36,1) 25%,rgba(224,117,35,1) 50%,rgba(242,38,42,1) 75%,rgba(130,100,70,1) 100%); 
 
    background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(118,191,36,1) 25%,rgba(224,117,35,1) 50%,rgba(242,38,42,1) 75%,rgba(130,100,70,1) 100%); 
 
    background-size: 100% 400%; 
 
    background-position:0 0; 
 
    -webkit-animation: animateGradient 5s ease 1; 
 
    -moz-animation: animateGradient 5s ease 1; 
 
    animation:   animateGradient 5s ease 1; 
 
    -webkit-animation-delay: 2s; 
 
    -moz-animation-delay: 2s; 
 
    animation-delay:   2s; 
 
} 
 

 

 
@-webkit-keyframes animateGradient { 
 
    0% {background-position: 0 0;} 
 
    50% {background-position: 0 100%;} 
 
    100% {background-position: 0 0;} 
 
} 
 
@-moz-keyframes animateGradient { 
 
    0% {background-position: 0 0;} 
 
    50% {background-position: 0 100%;} 
 
    100% {background-position: 0 0;} 
 
} 
 
@keyframes animateGradient { 
 
    0% {background-position: 0 0;} 
 
    50% {background-position: 0 100%;} 
 
    100% {background-position: 0 0;} 
 
}

<div></div>

---

Alternatywa: Innym podejściem można podjąć jest nakładanie jednego elementu na drugi, należy ustawić początkowy kąt nachylenia w górę i kończącym gradientu w dolnym elemencie, a także tworzyć animacja krycia, która znika z górnego elementu po pewnym czasie (opacity: 0)

Poniżej znajduje się podejście do sposobu można to zrobić za pomocą pojedynczego elementu w znacznikach (polegać na pseudo elementu :after lub :before). Poniższa metoda jest bardziej kompatybilnością urządzeń krzyża:

html, body {width:100%;height:100%;margin:0;} 
 
.gradient { 
 
    position:relative;  
 
    width: 100%; 
 
    height: 100%; 
 
    background: -webkit-linear-gradient(rgba(39,49,67,1), rgba(226,228,209,1)); 
 
    background: -o-linear-gradient(rgba(39,49,67,1), rgba(226,228,209,1)); 
 
    background: -moz-linear-gradient(rgba(39,49,67,1),rgba(39,49,67,1), rgba(226,228,209,1)); 
 
    background: linear-gradient(rgba(39,49,67,1),rgba(39,49,67,1), rgba(226,228,209,1)); 
 
} 
 
.gradient:after { 
 
    content:""; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: -webkit-linear-gradient(rgba(226,228,209,1), rgba(39,49,67,1)); 
 
    background: -o-linear-gradient(rgba(226,228,209,1), rgba(39,49,67,1)); 
 
    background: -moz-linear-gradient(rgba(226,228,209,1), rgba(39,49,67,1)); 
 
    background: linear-gradient(rgba(226,228,209,1), rgba(39,49,67,1)); 
 
    opacity: 0; 
 
    -webkit-animation: animateGradient 3s linear 1; 
 
    -moz-animation: animateGradient 3s linear 1; 
 
    animation: animateGradient 3s linear 1; 
 
} 
 

 
@-webkit-keyframes animateGradient { 
 
    0% {opacity:1;} 
 
    100% {opacity:0;} 
 
} 
 
@-moz-keyframes animateGradient { 
 
    0% {opacity:1;} 
 
    100% {opacity:0;} 
 
} 
 
@keyframes animateGradient {  
 
    0% {opacity:1;} 
 
    100% {opacity:0;} 
 
}

<div class="gradient"></div>

Answer 2

A t-Gradient jest uważana za background-image i obrazy tła można NIE być animowane przez zwykłych przejściach CSS.

Answer 3

Gradient Animacje

CSS3 nie obsługuje animacje gradientu liniowego, tak aby osiągnąć ten efekt trzeba będzie napisać animacja siebie w JavaScript lub użyj sztuczki z pozycją tła, jak ta opisana przez Easwee. Preferuję Javascript, ponieważ pozwala łatwo ponownie wykorzystać kod, dodać dynamiczne efekty i szybko zmodyfikować efekt. W związku z tym rozwiązanie Easwee jest naprawdę genialne, choć nieco ograniczające.

CSS oparty animacja gradient:

Chociaż CSS nie natywnie obsługują animacje gradientu jako Easwee stwierdził, możemy użyć „włamać” do tworzenia animacji gradientów CSS poprzez manipulowanie pozycję tła obrazu.

Przykład (na pełny ekran)

body { 
 
    margin: 20px; 
 
    background-color: #000; 
 
} 
 

 
.container { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    width: 480px; 
 
    height: 140px; 
 
    background-color: #333; 
 
    border-radius: 8px; 
 
} 
 

 
button { 
 
    position: absolute; 
 
    width: 160px; 
 
    height: 36px; 
 
    top: calc(50% - 18px); 
 
    left: 50px; 
 
    border: solid 1px #ccc; 
 
    border-radius: 8px; 
 
    color: #fff; 
 
    font: 16px sans-serif; 
 
    
 
    /* set up background gradient and animation */ 
 
    background-image: linear-gradient(#5187c4, #1c2f45); 
 
    background-size: auto 200%; 
 
    background-position: 0 100%; 
 
    transition: background-position 0.5s; 
 
} 
 
.container:hover button { 
 
    /* shift background gradient position */ 
 
    background-position: 0 0; 
 
} 
 

 
.slider { 
 
    position: absolute; 
 
    top: calc(50% - 18px); 
 
    right: 50px; 
 
    margin-top: -36px; 
 
    width: 160px; 
 
    height: 72px; 
 
    background-image: linear-gradient(#5187c4, #1c2f45); 
 
    transition: margin-top .5s; 
 
} 
 
.container:hover .slider { 
 
    margin-top: 0px; 
 
} 
 

 
.frame { 
 
    position: absolute; 
 
    top: calc(50% - 18px); 
 
    right: 50px; 
 
    box-sizing: border-box; 
 
    width: 160px; 
 
    height: 36px; 
 
    border: solid 1px #ccc; 
 
    border-radius: 8px; 
 
} 
 

 
.info { 
 
    margin: 20px auto 0; 
 
    color: #ccc; 
 
    font: 18px/150% sans-serif; 
 
    text-align: justify; 
 
    width: 480px; 
 
}

<div class="container"> 
 
    <button disabled>Some Button</button> 
 
    <div class="slider"></div> 
 
    <div class="frame"></div> 
 
</div> 
 

 
<div class="info"> 
 
    You can't animate gradient colors with pure CSS. Gradients are set via background-image, which is not (currently) an animatable property. But background-position is. So you can use background-size to make the background taller than the element it's on, then animate background-position to slide it up or down. The result is a simple animated fading gradient. 
 
</div>

Code Pen Link

animacja gradientu podstawie JavaScript

W celu stworzenia animacji gradientu oparciu JavaScript musimy:

• Utwórz funkcję, która pobiera element, zakres kolorów, opóźnienie czasowe między nimi i wywołanie zwrotne, które jest uruchamiane po zakończeniu funkcji (umożliwia to wykonywanie czynności takich jak powtarzanie w sposób ciągły lub do momentu spełnienia warunku) .
• Ta funkcja używa tego interwału, który uruchamia się 15 razy na sekundę i przekształca bieżący czas na wartość postępu od 0 do 100, określając, jak blisko jest ukończenie.
• Następnie pomnożymy różnicę w kolorach dla każdego dopasowania r, g, b przez postęp, aby uzyskać etap przejściowy, w którym aktualnie jesteśmy.
• Po skończeniu przechodzimy do następnego koloru.
• Pod koniec tego wszystkiego uruchamiamy wywołanie zwrotne, dzięki czemu możemy zdecydować, co zrobić.

(Jeśli chcesz rozwiązanie kodu daj mi znać. Jest to długi proces, aby wpisać się tak z tego powodu, jeśli używasz tylko ten jeden raz i na dwa może trzy kolory gradientu użyciu rozwiązanie Eawee za . w przeciwnym razie Javascript w twoim przyjacielem)

prostszy przykład animacji gradientu Javascript.

var colors = new Array(
 
    [62,35,255], 
 
    [60,255,60], 
 
    [255,35,98], 
 
    [45,175,230], 
 
    [255,0,255], 
 
    [255,128,0]); 
 

 
var step = 0; 
 
//color table indices for: 
 
// current color left 
 
// next color left 
 
// current color right 
 
// next color right 
 
var colorIndices = [0,1,2,3]; 
 

 
//transition speed 
 
var gradientSpeed = 0.002; 
 

 
function updateGradient() 
 
{ 
 
    
 
    if ($===undefined) return; 
 
    
 
var c0_0 = colors[colorIndices[0]]; 
 
var c0_1 = colors[colorIndices[1]]; 
 
var c1_0 = colors[colorIndices[2]]; 
 
var c1_1 = colors[colorIndices[3]]; 
 

 
var istep = 1 - step; 
 
var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]); 
 
var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]); 
 
var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]); 
 
var color1 = "rgb("+r1+","+g1+","+b1+")"; 
 

 
var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]); 
 
var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]); 
 
var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]); 
 
var color2 = "rgb("+r2+","+g2+","+b2+")"; 
 

 
$('#gradient').css({ 
 
    background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({ 
 
    background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"}); 
 
    
 
    step += gradientSpeed; 
 
    if (step >= 1) 
 
    { 
 
    step %= 1; 
 
    colorIndices[0] = colorIndices[1]; 
 
    colorIndices[2] = colorIndices[3]; 
 
    
 
    //pick two new target color indices 
 
    //do not pick the same as the current one 
 
    colorIndices[1] = (colorIndices[1] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length; 
 
    colorIndices[3] = (colorIndices[3] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length; 
 
    
 
    } 
 
} 
 

 
setInterval(updateGradient,10);

\t body{ 
 
\t background-color: #000000; 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 

 
#gradient 
 
{ 
 
    width: 100%; 
 
    height: 800px; 
 
    padding: 0px; 
 
    margin: 0px; 
 
}

<html> 
 
    <head> 
 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
    </head> 
 
    <body> 
 
    <div id="gradient" /> 
 
</body> 
 
</html> 
 

 

Javascript Based Gradient Animator (Code Pen)

Przydatne zasoby:

CSS Gradient Animator Generator

CSS Gradient Animator Walkthrough

Answer 4

Można spróbować LinearGradient.js tworzyć losowe i kolorowe gradienty liniowe.