creating a loop for css animation

Question

I am using the following code to change the background color of an element using css animations. Is there a way to change this in order to make it loop continuously?

    #circle {
      animation: colorchange 10s;
      -webkit-animation: colorchange 10s;
    }

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

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

Kamil Powroźnik · Accepted Answer · 2016-10-26 12:32:01Z

2

You must use:

animation-iteration-count: infinite;

answered Oct 26, 2016 at 12:32

Kamil Powroźnik

757 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alexis · Accepted Answer · 2016-10-26 12:32:34Z

2

If you take a look at the animation documentation you can indicate the number of iteration.

With the property animation-iteration-count or in the animation definition.

#circle {
  width:100px;
  height:100px;
  animation: colorchange 10s infinite;
  -webkit-animation: colorchange 10s infinite;
}

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

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

<div id="circle"></div>

answered Oct 26, 2016 at 12:32

Alexis

5,8211 gold badge30 silver badges46 bronze badges

Comments

Kaan Burak Sener · Accepted Answer · 2016-10-26 12:40:47Z

1

You should add animation-iteration-count: infinite; to your #circle div's css block as following:

#circle {
    animation: colorchange 10s;
    -webkit-animation: colorchange 10s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

The animation-iteration-count property specifies the number of times an animation should be played.

edited Oct 26, 2016 at 12:40

answered Oct 26, 2016 at 12:31

Kaan Burak Sener

99410 silver badges19 bronze badges

Collectives™ on Stack Overflow

creating a loop for css animation

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related