Modifica dello sfondo sfumato lineare dopo un momento

Question

Voglio cambiare uno sfondo dopo un po '. Se lo sfondo ha un colore "chiaro" non c'è problema, ma se il colore è un gradiente impostato come il codice non funziona. c'è un lavoro da fare per quello?

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 per il normale cambio di colore

Answer 1

Ciò che Dbugger ha detto è vero: non è possibile animare un'immagine di sfondo con animazioni CSS.

Tuttavia, si potrebbe fingere con un gradiente 4 stop (abilmente posizionare il colore si ferma - Io suggerisco di usare un generatore di gradiente come Colorzilla o simili - renderà il vostro lavoro più facile) - dal momento che un gradiente viene trattato come un background-image, si può animare la sua posizione usando background-position. Per animare la posizione è necessario aumentare le sue dimensioni in modo che parte del gradiente si trovi all'esterno del contenitore.

È possibile utilizzare animation-delay per impostare il ritardo iniziale prima dell'avvio dell'animazione.

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>

---

Alternativa: Un altro approccio si può prendere è quello di sovrapporre un elemento sopra l'altro, impostare il gradiente iniziale nel gradiente in alto e che termina con l'elemento di fondo, e creare un'animazione di opacità, che svanisce l'elemento superiore dopo un certo periodo di tempo (opacity: 0)

Di seguito è un approccio su come può farlo con un singolo elemento in markup (fare affidamento sulloo sullo pseudo elemento :before). Il seguente approccio ha più di compatibilità dispositivi incrociati:

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

Uno sfondo gradiente è considerato un background-image, e le immagini di sfondo possono NON essere animati attraverso le normali transizioni CSS.

Answer 3

gradiente animazioni

CSS3 non supporta le animazioni gradiente lineare, così al fine di ottenere questo effetto si dovrà scrivere l'animazione te stesso in Javascript o usa un trucco in background-position come quello dichiarato da Easwee. Preferisco Javascript perché ti permette di riutilizzare facilmente il codice, aggiungere effetti dinamici e modificare rapidamente l'effetto. Detto questo, la soluzione di Easwee è davvero geniale, sebbene alquanto limitante.

CSS animazione gradiente base:

Anche se i CSS non supporta nativamente le animazioni gradiente come Easwee dichiarato possiamo usare un "hack" per creare l'animazione gradiente in css manipolando la posizione dell'immagine di sfondo.

Esempio (Vai a schermo intero):

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

animazione gradiente basato su JavaScript

Al fine di costruire un'animazione basata Javascript gradiente abbiamo bisogno di:

Creare una funzione che accetta un elemento, un intervallo di colori, il ritardo di tempo tra di essi e un callback eseguito dopo la fine della funzione (che consente di eseguire operazioni come ripetizione continua o fino a quando una condizione non viene soddisfatta) .

Avere quella funzione quindi utilizzare un intervallo che si attiva 15 volte al secondo e converte il suo tempo corrente in un valore di avanzamento da 0 a 100 su quanto è vicino alla fine.

Quindi moltiplichiamo la differenza di colori per ogni corrispondenza r, g, b per il progresso per ottenere lo stadio della transizione in cui ci troviamo attualmente.

Al termine, passiamo al colore successivo.

Alla fine di tutto ciò viene avviata la richiamata, quindi possiamo decidere cosa fare.

(Se desideri una soluzione di codice fammi sapere. È un processo lungo da digitare, quindi per quel motivo se stai usando questa volta e per due forse tre colori sfumati usa la soluzione di Eawee . in caso contrario, di Javascript tuo amico)

un esempio più semplice di un'animazione gradiente 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)

Risorse utili:

CSS Gradient Animator Generator

CSS Gradient Animator Walkthrough

Answer 4

Si potrebbe provare LinearGradient.js per creare sfumature lineari casuali e colorati.