CSS animation-iteration-count

The animation-iteration-count property is used to specify the number of times an animation cycle plays.

CSS

animation-iteration-count: value;

Animations in CSS allow you to change the state of an element. While the animation-iteration-count property is used to specify the number of iterations of animation cycles, there are other animation properties as well like animation-name, animation-duration, animation-timing-function, animation-delay, animation-direction, animation-fill-mode and animation-play-state.

See the Pen Bouncing ball by Aakhya Singh (@aakhya) on CodePen.

Note: For animations to be effective, it is necessary to define the animation-duration property because the duration of animations is zero by default.

Values

<number> : Specifies the number of times the animation plays. The default value is 1.

infinite : The animation plays infinite number of times (keeps on playing).

initial : Sets the default value of the property.

inherit : Inherits the value from parent element.

Examples

In the following demo, an animation named "move" is created which defines the top and left positions when the animation is 0%, 20%, 50%, 70% and 100% complete. The duration of this animation applied to a div is set to 4 seconds and the number of times the animation cycle repeats is set to 2 using the animation-iteration-count property. The prefix -webkit- is used for better browser support.

HTML

<div></div>

CSS

@keyframes move {
  0% {top: 110px; left: 0;}
  20% {top: 0; left: 0;}
  50% {top: 0; left: 200px;}
  70% {top: 110px; left: 200px;}
  100% {top: 110px; left: 0;}
}

div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #007399;
  position: relative;
  top: 110px;
  -webkit-animation-name: move;
  animation-name: move;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-iteration-count: 2; 
  animation-iteration-count: 2;
}

See the Pen CSS animation-iteration-count example by Aakhya Singh (@aakhya) on CodePen.

Click on the RERUN button in the above demo to see the animation.

Look at another example in which the iteration count of an animation applied to an image is set to infinite.

See the Pen CSS animation-iteration-count example by Aakhya Singh (@aakhya) on CodePen.

Giving different iteration counts for different animations

If multiple animations are applied to an element, then you can make different animations repeat for different number of times.

If only one value is given to the animation-iteration-count property, then it decides the number of iterations of all the animations applied to the specified element. To give them different number of iterations, give multiple comma separated values to the animation-iteration-count property corresponding to the respective comma separated animation names given to the animation-name property.

Look at this code.

CSS

animation-name: reshape, colorChange;
animation-iteration-count: infinite, 1;

In this code, the iteration counts for the animations named "reshape" and "colorChange" are infinite and 1 respectively.

Look at the following demo in which the shape of a div keeps on changing forever and its background color changes only once.

HTML

<div></div>

CSS

@keyframes reshape{
  0% { border-radius: 50%; }
  50% { border-radius: 0%; }
  100% { border-radius: 50%; }
}

@keyframes colorChange{
  0% {background-color: #8f5656;}
  100% {background-color: #00ff00;}
}

div {
  width: 150px;
  height: 150px;
  background-color: #8f5656;
  border-radius: 50%;
  -webkit-animation-name: reshape, colorChange;
  animation-name: reshape, colorChange;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite, 1; 
  animation-iteration-count: infinite, 1;
}

See the Pen CSS animation-iteration-count example by Aakhya Singh (@aakhya) on CodePen.

Click on the RERUN button in the above demo to see the animation.

Browser Support

This property is supported in all the major browsers.