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

小提琴：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%}
}

Answer 2

您必须使用body和body:before看看这篇文章，可能会对文章