CSS3动画不断变化 [英] css3 animation change continuously

问题描述

我正在尝试实现css3动画。...
i打算改变我的目标，因此在
周期中会不断受到影响，但问题是在一个周期后，它停止变成红色，并且它不会改变其颜色进一步....
如何继续循环...

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/

在下面提供我的代码

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

推荐答案

请参见此处： http://jsfiddle.net/9CZFS/1/

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

您需要指定动画

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

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

这篇关于CSS3动画不断变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！