CSS animation-iteration-count Property

What You’ll Learn

The animation-iteration-count property controls how many times a CSS animation repeats. Use it to play an effect once, repeat it a set number of times, or loop forever with infinite.

Definition and Usage

The animation-iteration-count CSS property defines how many times an animation cycle should play before stopping. One cycle means running through all keyframes from start to end once.

This is useful for loaders that spin forever, attention-grabbing effects that repeat a few times, or entrance animations that should happen only once.

📝 Syntax

Set animation-iteration-count with a number or the keyword infinite:

selector {
  animation-iteration-count: number | infinite;
}

Basic Example

.box {
  animation: move 2s ease-in-out;
  animation-iteration-count: 3;
}

Syntax Rules

• The initial value is 1, so animations play once unless you change it.
• Use positive numbers such as 2, 3, or decimal values like 2.5.
• infinite repeats the animation continuously with no end.
• When multiple animations run on one element, use comma-separated counts matching each animation.
• Iteration count can be included in the animation shorthand after delay.

Default Value

The initial value of animation-iteration-count is 1. The animation runs through its keyframes one time and then stops.

💎 Property Values

These values control how many animation cycles play.

Finite Count vs infinite

Examples Gallery

Try animation-iteration-count with a fixed repeat count, infinite, play-once behavior, and shorthand syntax.

<style>
  @keyframes move {
    from { transform: translateX(0); }
    to { transform: translateX(300px); }
  }
  .box {
    width: 50px;
    height: 50px;
    background: blue;
    animation: move 2s ease-in-out;
    animation-iteration-count: 3;
  }
</style>

<div class="box"></div>

.spinner {
  animation: spin 1s linear infinite;
}

.hero-title {
  animation: fadeIn 0.8s ease-out forwards;
  animation-iteration-count: 1;
}

.dot {
  animation: blink 1.2s ease-in-out infinite;
}

💡 Best Practices