css3 animation change continuously

问题

i am trying to implement css3 animations.... i am planning to change my aimations affects continuously in cycle but the problem is after one cycle it stops in red color it does not change its color further.... how to continue the cycle...

http://jsfiddle.net/9CZFS/

providing my code below

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

回答1:

See here: http://jsfiddle.net/9CZFS/1/

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

You need to specify that the animation is going to loop forever.

Also, if you want the animation to be smooth, you'll need to have it start and end with the same value:

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

回答2:

You just need to tell CSS to infinitely play the animation, it defaults to only playing once. To do this you use animation-iteration-count. Just add the following code to your div style declaration:

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

Here is a demo: http://jsfiddle.net/9CZFS/3/

Documentation for animation-iteration-count: https://developer.mozilla.org/en-US/docs/CSS/animation-iteration-count

Note: My demo also changed your animations to smoothly return to red when it's done:

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

来源：https://stackoverflow.com/questions/13768706/css3-animation-change-continuously