html 动画无限循环,CSS3动画 – 平滑无限循环

我制作了一个小背景动画,其中div随着时间的推移会改变颜色.

它工作顺利,但当它达到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}

}