animation-iteration-count

Definition

The animation-iteration-count property in CSS is used to specify the number of times an animation should be played.

The values can be:

• A number: Defines the number of times the animation will play. For example, animation-iteration-count: 3; means the animation will run 3 times.
• infinite: The animation will play indefinitely, repeating forever.
• A decimal: If you use a decimal, the animation will run for the number of times equal to the whole number part, and then stop at the percentage through the animation equal to the decimal part. For example, animation-iteration-count: 2.5; means the animation will run twice, and then stop halfway through the third iteration. Here’s an example:

Here’s an example:

div {
  animation-name: example;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes example {
  from {
    background-color: red;
  }

  to {
    background-color: yellow;
  }
}

In this example, the animation will continually cycle the background color of the div from red to yellow, as it’s set to repeat infinitely.