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

你必须使用身体和身体：之前看看这篇文章，可能会有所帮助article

CSS动画渐变不渲染

2 个答案: