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:在阅读本文之前，也许可以帮助文章