CSS3動畫 - 平滑無限循環

我製作了一個小背景動畫，其中div隨時間變化。它工作的很順利，但當它達到100％時，它會直接跳到0％而不進行任何轉換。我在谷歌搜索和嘗試不同的方式做動畫，但我一直無法得到流體「重新啓動」，如果動畫。CSS3動畫 - 平滑無限循環

我錯過了什麼？

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

來源

2013-10-16 Morten Hjort

你只需要修復您的框架以另一種方式：使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} 
 
}

來源

2013-10-16 12:55:56 zessx

有animation-direction屬性，可以將其設置爲alternate以使其來回運行，而不是再次跳回到0％。

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

編輯：zessx剛剛發佈之前刪除它的小提琴。我剛剛更新了alternate選項。工作正常。 fiddle

來源

2013-10-16 12:56:23 MildlySerious

雖然[fiddle link]（http://jsfiddle.net/FZg2D/1/）沒有，但此方法運行良好。 –

CSS3動畫 - 平滑無限循環

回答

相關問題