CODEWITHSUNDEEP
csscss-animations
user1884119
user1884119

Reputation:

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

Upvotes: 4

Views: 13734

Answers (2)

Jasper
Jasper

Reputation: 76003

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

Upvotes: 2

Shmiddty
Shmiddty

Reputation: 13967

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

Upvotes: 12

Related Questions