Question

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

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