CSS animierte Gradienten nicht Rendering

Question

ich https://www.gradient-animator.com/ bin mit einem CSS Gradient Animation zu erzeugen, die machen nicht ..

Die CSS:

.teste{ 
background: linear-gradient(180deg, #000000, #19408e, #15b9ca); 
background-size: 600% 600%; 

-webkit-animation: Gradnt 30s ease infinite; 
-moz-animation: Gradnt 30s ease infinite; 
-o-animation: Gradnt 30s ease infinite; 
animation: Gradnt 30s ease infinite; 

@-webkit-keyframes Gradnt { 
    0%{background-position:50% 0%} 
    50%{background-position:50% 100%} 
    100%{background-position:50% 0%} 
} 
@-moz-keyframes Gradnt { 
    0%{background-position:50% 0%} 
    50%{background-position:50% 100%} 
    100%{background-position:50% 0%} 
} 
@-o-keyframes Gradnt { 
    0%{background-position:50% 0%} 
    50%{background-position:50% 100%} 
    100%{background-position:50% 0%} 
} 
@keyframes Gradnt { 
    0%{background-position:50% 0%} 
    50%{background-position:50% 100%} 
    100%{background-position:50% 0%} 
} 

min-height:100%; 
min-width:100%; 
position:absolute; 
} 

Die Geige: https://jsfiddle.net/yoonma8v/

Was ist los? Wie kann ich es zum Laufen bringen?

Answer 1

Verschieben Sie Ihren Keyframe aus dem Styling Ihrer Geschmacksklasse. Zum Beispiel:

.teste{ 
background: linear-gradient(180deg, #000000, #19408e, #15b9ca); 
background-size: 600% 600%; 

-webkit-animation: Gradnt 30s ease infinite; 
-moz-animation: Gradnt 30s ease infinite; 
-o-animation: Gradnt 30s ease infinite; 
animation: Gradnt 30s ease infinite; 

min-height:100%; 
min-width:100%; 
position:absolute; 
} 

@-webkit-keyframes Gradnt { 
    0%{background-position:50% 0%} 
    50%{background-position:50% 100%} 
    100%{background-position:50% 0%} 
} 
@-moz-keyframes Gradnt { 
    0%{background-position:50% 0%} 
    50%{background-position:50% 100%} 
    100%{background-position:50% 0%} 
} 
@-o-keyframes Gradnt { 
    0%{background-position:50% 0%} 
    50%{background-position:50% 100%} 
    100%{background-position:50% 0%} 
} 
@keyframes Gradnt { 
    0%{background-position:50% 0%} 
    50%{background-position:50% 100%} 
    100%{background-position:50% 0%} 
} 

Answer 2

Sie bekommen Körper und Körper zu verwenden: vor einen Blick in diesem Artikel hat, könnte helfen, article