[英]CSS animation of body background-color not working
I'm trying to animate the background-color of the body but it doesn't work, it changes the color from green to white but I set other colors in between and I don't understand why some examples of doing this work instead. 我正在尝试为身体的背景色设置动画,但是它不起作用,它将颜色从绿色更改为白色,但是我在两者之间设置了其他颜色,而且我不明白为什么要进行此工作的一些示例。
CSS code: 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}
}
Here's the jsfiddle: http://jsfiddle.net/L69egL59/1/ 这是jsfiddle: http : //jsfiddle.net/L69egL59/1/
Because //
is not a valid syntax for commenting in CSS, remove them and your code should work fine. 因为
//
不是在CSS中注释的有效语法,所以请将其删除,您的代码应该可以正常工作。
So remove them, or use /* color here */
to comment out anything in your stylesheet. 因此,请删除它们,或
/* color here */
使用/* 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;
}
}
Make sure you use semi colons after each property name, even if you declare one property per block. 确保即使每个块声明一个属性,也要在每个属性名称后使用半冒号。
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}
}
You can comment like this in css /* your comment */
您可以在CSS中这样评论
/* your comment */
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.