CSS 'animation-iteration-count' Property Explained

The CSS 'animation-iteration-count' property specifies the number of times an animation cycle should be played before stopping. Essentially, it controls how many times an animation repeats itself. This property is crucial for creating animations that need to loop a specific number of times or indefinitely.

CSS 'animation-iteration-count' Property Example

See the Pen CSS 'animation-iteration-count' Property by Webzstore (@webzstore) on CodePen.

The 'animation-iteration-count' property offers a straightforward way to control the repetition of CSS animations, from simple, single-play animations to complex, infinitely looping effects. This flexibility is key to designing dynamic, interactive web experiences that engage and retain user attention.

Browser Support For 'animation-iteration-count' Property

Source: MDN browser-compat-data 8.1.4, checked 3 October 2026. Prefixed support and implementations that were later removed are not counted, and some browsers list partial support or extra values. See the MDN reference for animation-iteration-count for the full compatibility details, including mobile browsers.

CSS Syntax of the 'animation-iteration-count' Property

animation-iteration-count: number | infinite;

/* Examples */
animation-iteration-count: 3;
animation-iteration-count: 1.5; /* one and a half cycles */
animation-iteration-count: infinite;

Usage of the 'animation-iteration-count' Property

Use 'animation-iteration-count' when you want to repeat an animation. This can be particularly useful for creating attention-grabbing effects, such as blinking text, spinning icons, or a slide show that cycles through images. It's also handy for animations that should only play a fixed number of times before coming to a stop.

Property Values of the 'animation-iteration-count' Property

• Number: Specifies the number of times the animation should play. This can be any non-negative number, including 0 and fractions; negative values are invalid. The initial value is 1. A fractional count stops part-way through a cycle: animation-iteration-count: 1.5 plays the animation once in full and then half of a second cycle, so it stops part-way through that cycle.
• Infinite: The animation will repeat forever, creating an endless loop.