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

Ответы на вопрос(2)

Ваш ответ на вопрос