css3动画瞬间变化,CSS3动画不断变化(css3 animation change continuously)

我想实现CSS3动画....我正打算改变我的aimations在周期持续影响，但问题是在一个循环后停止在红色不会进一步改变其颜色....如何继续循环...

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

}