html - body 背景颜色的CSS动画不起作用

Question

我正在尝试为 body 的背景颜色设置动画，但它不起作用，它将颜色从绿色更改为白色，但我在两者之间设置了其他颜色，我不明白为什么这样做的一些例子而是工作。

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

确保在每个属性名称后使用分号，即使您为每个 block 声明一个属性也是如此。