animation-iteration-count

The animation-iteration-count property is used to specify the number of times that an animation cycle is played before the animation stops.

The initial value is ‘1’, meaning the animation will play from beginning to end once.

This property is often used in conjunction with an animation-direction value of alternate, which will cause the animation to play in reverse on alternate cycles. See the live demo section below for a live demo.

You can specify one iteration count or multiple comma-separated iteration counts. When you provide a list of comma-separated iteration counts, this list is usually mapped to a list of values provided by other animation-related properties, such as the animation-delay, animation-timing-function, and animation-name properties, among others. Each list of values in these properties is treated kind of like an array, where each value in a list of values has its own index. Then, each value in a list of values is mapped to its corresponding value with the same index in the list provided in the other properties.

For example, if you provide two animation-iteration-count values, then the first value determines the iteration count of the animation of the first animation in the list of animation names provided by animation-name, and the second iteration count specifies the iteration count of the second animation.

The animation-iteration-count property is usually set as part of the animation property shorthand.