CSS body background-color 的动画不工作

Question

我正在尝试为 body 的 background-color 制作动画，但它不起作用，它将颜色从绿色更改为白色，但我在两者之间设置了其他颜色，但我没有不明白为什么做这个的一些例子反而有效。

CSS代码：

body {
animation: mainscreen 3s linear infinite alternate;
-webkit-animation: mainscreen 3s linear infinite alternate;
}

@-webkit-keyframes mainscreen {
    0%   {background-color: #00F900} //green
    12.5%  {background-color: #3363FF} //blue
    25%  {background-color: #993399} //purple
    37.5%  {background-color: #FF85E0} //pink
    50% {background-color: #F9E600} //yellow
    62.5% {background-color: #FF9900} //orange
    75% {background-color: #FF1919} //red
    87.5% {background-color: #FDFDFD} //white
    100% {background-color: #000000}
}

@keyframes mainscreen {
    0%   {background-color: #00F900} //green
    12.5%  {background-color: #3363FF} //blue
    25%  {background-color: #993399} //purple
    37.5%  {background-color: #FF85E0} //pink
    50% {background-color: #F9E600} //yellow
    62.5% {background-color: #FF9900} //orange
    75% {background-color: #FF1919} //red
    87.5% {background-color: #FDFDFD} //white
    100% {background-color: #000000}
}

这是 jsfiddle：http://jsfiddle.net/L69egL59/1/

Answer 1

因为 // 不是用于在 CSS 中注释的有效语法，请删除它们并且您的代码应该可以正常工作。

因此删除它们，或使用 /* color here */ 注释掉样式表中的任何内容。

@keyframes mainscreen {
    0% {
        background-color: #00F900;
    }
    12.5% {
        background-color: #3363FF;
    }
    25% {
        background-color: #993399;
    }
    37.5% {
        background-color: #FF85E0;
    }
    50% {
        background-color: #F9E600;
    }
    62.5% {
        background-color: #FF9900;
    }
    75% {
        background-color: #FF1919;
    }
    87.5% {
        background-color: #FDFDFD;
    }
    100% {
        background-color: #000000;
    }
}

Demo

确保在每个属性名称后使用分号，即使每个块声明一个属性。

Answer 2

body {
animation: mainscreen 3s linear infinite alternate;
-webkit-animation: mainscreen 3s linear infinite alternate;
}

@-webkit-keyframes mainscreen {
0%   {background-color: #00F900} /*green*/
12.5%  {background-color: #3363FF} /*blue*/
25%  {background-color: #993399} /*purple*/
37.5%  {background-color: #FF85E0} /*pink*/
50% {background-color: #F9E600} /*yellow*/
62.5% {background-color: #FF9900} /*orange*/
75% {background-color: #FF1919} /*red*/
87.5% {background-color: #FDFDFD} /*white*/
100% {background-color: #000000}
}


@keyframes mainscreen {
0%   {background-color: #00F900} /*green*/
12.5%  {background-color: #3363FF} /*blue*/
25%  {background-color: #993399} /*purple*/
37.5%  {background-color: #FF85E0} /*pink*/
50% {background-color: #F9E600} /*yellow*/
62.5% {background-color: #FF9900} /*orange*/
75% {background-color: #FF1919} /*red*/
87.5% {background-color: #FDFDFD} /*white*/
100% {background-color: #000000}
}

您可以在css/* your comment */

中这样评论

CSS body background-color 的动画不工作

CSS animation of body background-color not working

html

css

css-animations