css3动画不断变化

我正在尝试实现css3动画。。。。 我计划在一个周期内改变我的目标 但问题是在一个循环后，它停止在红色中，它不会进一步改变颜色。。。。 如何继续循环

在下面提供我的代码

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

请看这里：

您需要指定动画将永远循环

此外，如果希望动画平滑，则需要以相同的值开始和结束动画：

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

---

你只需要告诉CSS无限播放动画，它默认只播放一次。要执行此操作，请使用

动画迭代计数

。只需将以下代码添加到

div

样式声明中：

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

下面是一个演示：

动画迭代计数的文档

：

注意：我的演示还更改了动画，使其在完成后平滑返回红色：

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

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