CSS animation-iteration-count

The animation-iteration-count property in CSS specifies the number of times an animation should repeat. You can define it to run a fixed number of times, indefinitely, or inherit its value from its parent element.

Syntax of animation-iteration-count

</>
Copy
animation-iteration-count: number | infinite | initial | inherit;

Values

ValueDescription
numberSpecifies the number of times the animation should repeat. For example, 3 means the animation runs three times.
infiniteThe animation will repeat indefinitely.
initialSets the property to its default value (1).
inheritInherits the value from the parent element.

Default Value

1

Examples for animation-iteration-count

Using the CSS animation-iteration-count Property

The following examples demonstrate how the animation-iteration-count property can be used to control the number of times an animation repeats.

</>
Copy
/* Play animation three times */
.element {
  animation-iteration-count: 3;
}

/* Play animation indefinitely */
.element {
  animation-iteration-count: infinite;
}

/* Inherit the value from the parent element */
.element {
  animation-iteration-count: inherit;
}

Example 1: Applying animation-iteration-count

The following example demonstrates the use of animation-iteration-count with different values for a simple animation that moves an element horizontally.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<style>
  @keyframes slide {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(200px);
    }
  }

  .single {
    animation: slide 2s;
    animation-iteration-count: 1;
    background-color: lightgreen;
    margin: 10px;
    padding: 10px;
  }

  .multiple {
    animation: slide 2s;
    animation-iteration-count: 3;
    background-color: lightblue;
    margin: 10px;
    padding: 10px;
  }

  .infinite {
    animation: slide 2s infinite;
    background-color: lightcoral;
    margin: 10px;
    padding: 10px;
  }
  
  div {
    width: 200px;
  }
</style>
</head>
<body>

<h1>CSS animation-iteration-count Example</h1>

<div class="single">Plays Once</div>
<div class="multiple">Plays Three Times</div>
<div class="infinite">Plays Indefinitely</div>

</body>
</html>

single

  1. The animation-iteration-count is set to 1.
  2. The animation runs exactly one time from the from keyframe (translateX(0)) to the to keyframe (translateX(200px)).
  3. After completing the animation once, the element stops at its final position if combined with animation-fill-mode: forwards or reverts to its original state otherwise.
  4. The result is a light green box that slides to the right only once and then stops.

multiple count:3

  1. The animation-iteration-count is set to 3.
  2. The animation runs three times in succession, restarting at the from keyframe each time.
  3. After completing the animation three times, the element stops at its final position if combined with animation-fill-mode: forwards or reverts to its original state otherwise.
  4. The result is a light blue box that slides to the right three times and then stops.

infinite

  1. The animation-iteration-count is set to infinite.
  2. The animation runs continuously without stopping, repeatedly transitioning from the from keyframe to the to keyframe.
  3. This creates a loop where the animation restarts as soon as it completes, providing an ongoing effect.
  4. The result is a light coral box that slides to the right repeatedly and never stops.

Browser Support

The animation-iteration-count property is supported in most modern browsers. Below is a compatibility table:

BrowserVersion
Chrome43
Edge10
Firefox16
Safari9
Opera30