animationIterationCount

The animationIterationCount property in CSS is used to specify the number of times an animation should be played before stopping. This property is part of the CSS Animations module, which allows for the creation of complex animations directly within CSS. The property can take several types of values, including a number, the keyword "infinite", or a list of numbers and the keyword "infinite".

When a number is specified, the animation will play that many times. For example, an animationIterationCount of 3 will cause the animation to play three times. The keyword "infinite" will cause the animation to repeat indefinitely until the animation is stopped or the element is removed from the document.

A list of numbers and the keyword "infinite" can also be used. This allows for more complex patterns of animation repetition. For instance, a value of "2, 3, infinite" would cause the animation to play twice, then three times, and then repeat indefinitely.

The animationIterationCount property is particularly useful for creating looping animations, such as those used in loading spinners or background animations. It can also be used to create more complex animation sequences by combining it with other animation properties like animationDelay and animationDirection.

The default value for animationIterationCount is 1, meaning that the animation will play once unless otherwise specified. It is important to note that the animationIterationCount property only affects the number of times the animation is played; it does not affect the duration or timing of the animation itself.