2015-05-20 30 views
5

Sto cercando di rendere animato sfondo sfumato CSS, sto generando CSS per gradiente in questa pagina: http://www.gradient-animator.com/ Ecco il css:CSS Gradient animazione non funziona

body { 
background: linear-gradient(270deg, #18f0b8, #18a2f0, #db5640); 
background-size: 600% 600%; 
-webkit-animation: Gradient 60s ease infinite; 
-moz-animation: Gradient 60s ease infinite; 
animation: Gradient 60s ease infinite; 
@-webkit-keyframes Gradient { 
    0%{background-position:0% 50%} 
    50%{background-position:100% 50%} 
    100%{background-position:0% 50%} 
} 
@-moz-keyframes Gradient { 
    0%{background-position:0% 50%} 
    50%{background-position:100% 50%} 
    100%{background-position:0% 50%} 
} 
@keyframes Gradient { 
    0%{background-position:0% 50%} 
    50%{background-position:100% 50%} 
    100%{background-position:0% 50%} 
} 
} 

Produce bene pendenza, ma non lo animerà. Mi sto perdendo qualcosa? Ecco il violino: http://jsfiddle.net/9s9g6ktu/

risposta

7

Yup .... Hai avuto modo di chiudere la vostra body CSS e avere le animazioni dei fotogrammi chiave nella loro spontanea volontà. Mi piace questo http://jsfiddle.net/9s9g6ktu/1/

+0

questo funziona bene. Ottimo lavoro :) – Elle