Eu fiz uma pequena animação de fundo onde um div muda de cor ao longo do tempo. Ele funciona sem problemas, mas quando chega a 100%, ele pula direto para 0% sem nenhuma transição. Eu pesquisei no google e tentei diferentes maneiras de fazer a animação, mas não consegui obter um "reinício" fluido se a animação.

o que estou perdendo?

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