Animazione CSS3 - ciclo infinito fluido

Question

Ho creato una piccola animazione di sfondo in cui un div cambia colore nel tempo. Funziona senza intoppi, ma quando arriva al 100% salta direttamente allo 0% senza alcuna transizione. Ho cercato su google e ho provato diversi modi di fare l'animazione, ma non sono riuscito a ottenere un "riavvio" fluido se l'animazione.

Cosa mi manca?

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

Answer 1

Non vi resta che correggere i fotogrammi in un altro modo: fare la from (0%) e to (100%) Valori lo stesso:

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

Answer 2

C'è la proprietà animation-direction, che potrebbe essere impostata su alternate per farla andare avanti e indietro invece di tornare nuovamente allo 0%.

-webkit-animation: pulsate 20s infinite alternate; 
animation: pulsate 20s infinite alternate; 
-moz-animation: pulsate 20s infinite alternate; 

MODIFICA: zessx ha appena postato un violino prima di rimuoverlo di nuovo. L'ho appena aggiornato con l'opzione alternate. Funziona bene. fiddle