CSS animation-iteration-count Property

Definition and Usage

The animation-iteration-count property sets how many times an animation cycle plays before it stops. The initial value is 1. Use a number for a fixed count, or infinite to keep repeating.

Non-integer numbers play a partial cycle. For example, 1.5 runs one full play, then half of the next. You still need an animation-name and an animation-duration. It applies to all elements, including ::before and ::after, and it is not inherited. A count does not remove motion for someone who set prefers-reduced-motion.

CSS Syntax

The initial value is 1. Zero or a positive number is allowed. Negative numbers are invalid. For several animations, separate the counts with commas, in the same order as the names.

Property Values

How to Use animation-iteration-count

Name a short fade, give it a duration, then set how many times it should play.

1. Write @keyframes fade from full opacity to 0.25.
2. Set animation-name: fade and animation-duration: 1s.
3. Set animation-iteration-count to a number or infinite.
4. Use at least 2 when you want to see animation-direction: alternate turn around.

Live Preview

The same one-second fade. Only animation-iteration-count changes. Apply again to restart.

CSS Examples

Each snippet uses the same fade. The only change is animation-iteration-count. Use Try It Yourself for a live editor.

<style>
  @keyframes fade {
    from {
      opacity: 1;
    }

    to {
      opacity: 0.25;
    }
  }

  p {
    animation-name: fade;
    animation-duration: 1s;
    animation-iteration-count: 2;
  }
</style>

<p>Fade</p>

<style>
  @keyframes fade {
    from {
      opacity: 1;
    }

    to {
      opacity: 0.25;
    }
  }

  p {
    animation-name: fade;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
</style>

<p>Fade</p>

<style>
  @keyframes fade {
    from {
      opacity: 1;
    }

    to {
      opacity: 0.25;
    }
  }

  p {
    animation-name: fade;
    animation-duration: 1s;
    animation-iteration-count: 1.5;
  }
</style>

<p>Fade</p>

Key Takeaways