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}
}