CSS动画渐变不渲染

Question

我正在使用 https://www.gradient-animator.com/生成不渲染的 CSS 渐变动画..

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;
}

fiddle :https://jsfiddle.net/yoonma8v/

这是怎么回事？我怎样才能让它发挥作用？

Answer 1

将您的关键帧从您的品位风格中移开。例如:

.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%}
}