animation-iteration-count

Definition

The animation-iteration-count property in CSS determines the number of times an animation should run. It can be set to a specific number of iterations, or it can be set to infinite to run the animation indefinitely.

Examples

Run an animation indefinitely:

.element {
  animation-name: myAnimation;
  animation-iteration-count: infinite;
  animation-duration: 1s;
}

@keyframes myAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Run an animation twice:

.element {
  animation-name: myAnimation;
  animation-iteration-count: 2;
  animation-duration: 1s;
}

@keyframes myAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Run an animation three times, with a delay of 1s between each iteration:

.element {
  animation-name: myAnimation;
  animation-iteration-count: 3;
  animation-duration: 1s;
  animation-delay: 1s;
}

@keyframes myAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Run an animation once, with a delay of 2s before the animation starts:

.element {
  animation-name: myAnimation;
  animation-iteration-count: 1;
  animation-duration: 1s;
  animation-delay: 2s;
}

@keyframes myAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Values

Keep in mind that the animation-iteration-count property only works in conjunction with the animation-name, animation-duration, and animation-timing-function properties. If any of these are not set, the animation will not run.

Best Practices

• Use the animation-iteration-count property in conjunction with the animation-name, animation-duration, and animation-timing-function properties to define an animation. If any of these are not set, the animation will not run.
• Consider the user experience when setting the animation-iteration-count property. If the animation is set to run indefinitely, it may become annoying or distracting to the user. On the other hand, if the animation is set to run only a few times, it may not be noticeable or effective.
• Use the animation-delay property to add a delay before the animation starts, or to add a delay between iterations of the animation. This can help to make the animation more seamless and natural.
• Use the animation-direction property to specify whether the animation should run forward, backward, or in alternating directions. This can add more variety and interest to the animation.
• Test the animation on different devices and browsers to ensure that it works as intended. Different browsers and devices may handle animations differently, so it is important to test and debug as necessary.

Browser Compatibility