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.

Syntax

.badge {
  animation-iteration-count: 3;
}

Values

<number> for explicit loops.
infinite to loop forever.

Practical Examples

.badge {
  animation: wiggle 220ms ease-out;
  animation-iteration-count: 3;
}

Limit iterations for attention-grabbing animations that should stop.

HTML

Code

<style>
@keyframes wiggle-iteration-demo { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(-5deg); } 60% { transform: rotate(4deg); } }
.wiggle-iteration-demo { animation: wiggle-iteration-demo 0.22s ease-out 0s 3; }
</style>
<button class="rounded-full bg-emerald-500 px-4 py-2 text-sm font-semibold text-white wiggle-iteration-demo">Saved</button>

Tips & Best Practices

Use finite loops for notifications; infinite loops for loaders only.
Combine with animation-fill-mode: forwards to preserve the end state.

Accessibility & UX Notes

Infinite animations should be optional; allow users to pause them.

Browser Support

Supported across modern browsers.

animation-play-state to pause/resume.
animation-direction for alternating loops.