The animation-iteration-count property sets how many times an animation cycle runs. Its default value is 1, so an animation normally plays once and stops. section 3.4 section 3.4.3
Use the infinite keyword to keep an animation playing continuously, or use an integer to run it a specific number of times. section 3.4.3
Repeating a loading animation
A loader can apply the same doScale keyframes to several rectangles. With animation-iteration-count: infinite, each rectangle continues shrinking and growing instead of stopping after one cycle. section 3.4 section 3.4.3
Listing 3.9 Added animation iteration count
rect {
animation-name: doScale;
animation-duration: 2.2s;
animation-iteration-count: infinite;
}
This listing shows animation-iteration-count alongside the keyframe name and duration in a complete rectangle animation rule. section 3.4.3
The property fits into broader CSS animation declarations:
- Combine the name, duration, and iteration count with the animation shorthand, such as animation: doScale 2.2s infinite. section 3.4.4
- Pair repetition with animation-delay values to stagger otherwise identical elements and create a ripple effect. section 3.4
