css3動畫不斷變化

Question

我正在嘗試實現css3動畫.... 我打算改變我的動畫持續影響週期 ，但問題是在一個週期後它停在紅色，它不會進一步改變顏色.... 如何繼續循環...

http://jsfiddle.net/9CZFS/

提供以下

div 
{ 
width:100px; 
height:100px; 
background:red; 
animation:myfirst 5s; 
-moz-animation:myfirst 5s; /* Firefox */ 
-webkit-animation:myfirst 5s; /* Safari and Chrome */ 
-o-animation:myfirst 5s; /* Opera */ 
} 

@keyframes myfirst 
{ 
0% {background:red;} 
25% {background:yellow;} 
50% {background:blue;} 
100% {background:green;} 
} 

@-moz-keyframes myfirst /* Firefox */ 
{ 
0% {background:red;} 
25% {background:yellow;} 
50% {background:blue;} 
100% {background:green;} 
} 

@-webkit-keyframes myfirst /* Safari and Chrome */ 
{ 
0% {background:red;} 
25% {background:yellow;} 
50% {background:blue;} 
100% {background:green;} 
} 

@-o-keyframes myfirst /* Opera */ 
{ 
0% {background:red;} 
25% {background:yellow;} 
50% {background:blue;} 
100% {background:green;} 
} 

Answer 1

我的代碼在這裏看到：http://jsfiddle.net/9CZFS/1/

animation:myfirst 5s linear infinite; 
         ----^----- 

您需要指定動畫將永久循環。

另外，如果你希望動畫流暢，你需要有它開始和同值結尾：

0%,100% {background:red;} 
25% {background:yellow;} 
50% {background:blue;} 
75% {background:green;} 

Answer 2

你只需要告訴CSS無限播放動畫，它默認只播放一次。爲此，請使用animation-iteration-count。只需將下面的代碼添加到您的div樣式聲明：

-moz-animation-iteration-count: infinite; 
-webkit-animation-iteration-count: infinite; 
-o-animation-iteration-count: infinite; 

這裏是一個演示：http://jsfiddle.net/9CZFS/3/

的文檔animation-iteration-count：https://developer.mozilla.org/en-US/docs/CSS/animation-iteration-count

注：我的演示也改變了你的動畫順利返回紅當它完成時：

@keyframes myfirst 
{ 
0% {background:red;} 
25% {background:yellow;} 
50% {background:blue;} 
75% {background:green;} 
100% {background:red;} 
}