CSS3アニメーション - 滑らかな無限サイクル

Question

私は、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} 
      } 

Answer 1

あなただけの別の方法であなたのフレームを修正する必要があります：from（0％）を作成し、to（100％）が同じ値：

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

がありますanimation-directionプロパティをalternateに設定して、0％に再度ジャンプするのではなく、前後に実行させることができます。

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

EDIT：zessxさんは、もう一度削除する前にフィドルを投稿しました。私はちょうどalternateオプションでそれを更新しました。正常に動作します。 fiddle