我制作了一个小背景动画,其中div随着时间的推移会改变颜色.
它工作顺利,但当它达到100％时,它会直接跳到0％而没有任何转换.
我在google上搜索并尝试了不同的动画制作方式,但是如果动画我一直无法获得流畅的“重启”.
它工作顺利,但当它达到100％时,它会直接跳到0％而没有任何转换.
我在google上搜索并尝试了不同的动画制作方式,但是如果动画我一直无法获得流畅的“重启”.
我错过了什么？
-webkit-animation: pulsate 20s infinite;
animation: pulsate 20s infinite;
-moz-animation: pulsate 20s infinite;
@-webkit-keyframes pulsate {
0% {background: @black}
25% {background: @red}
50% {background: @blue}
75% {background: @orange}
100% {background: @green}
}
@keyframes pulsate {
0% {background: @black}
25% {background: @red}
50% {background: @blue}
75% {background: @orange}
100% {background: @green}
}
@-moz-keyframes pulsate {
0% {background: @black}
25% {background: @red}
50% {background: @blue}
75% {background: @orange}
100% {background: @green}
}
解决方法
您只需要以另一种方式修复框架：使from(0％)和(100％)值相同：
html,body {
width: 100%; height: 100%;
margin: 0;
padding: 0;
}
body {
-webkit-animation: pulsate 20s linear infinite;
-moz-animation: pulsate 20s linear infinite;
animation: pulsate 20s linear infinite;
}
@-webkit-keyframes pulsate {
0% {background: black}
20% {background: red}
40% {background: blue}
60% {background: orange}
80% {background: green}
100% {background: black}
}
@-moz-keyframes pulsate {
0% {background: black}
20% {background: red}
40% {background: blue}
60% {background: orange}
80% {background: green}
100% {background: black}
}
@keyframes pulsate {
0% {background: black}
20% {background: red}
40% {background: blue}
60% {background: orange}
80% {background: green}
100% {background: black}
}
