Animation iteration
Learn the repeat count with animation-iteration-count.
What is animation-iteration-count?
animation-iteration-count sets how many times an animation plays. The default is 1; it plays once and stops. Writing 3 makes it play three times.
For a loader that spins forever, use infinite: the animation never stops. For a notice that pulses once, 1 is enough. A number or infinite is the only accepted value.
Duration times count
Total time equals duration × count. With animation-duration: 2s and animation-iteration-count: 3 the animation runs for 6 seconds. With infinite the total cannot be measured; the animation runs endlessly.
That makes infinite a good fit for cyclic motions (spin, pulse, breathe). For one-shot motions (open, transition) a number is better. Pick loops that do not annoy the user.
Exercise Add the repeat counts
The .loader should spin forever: animation-iteration-count: infinite. The .notice should pulse three times: animation-iteration-count: 3. Add an animation-iteration-count declaration to both elements.
Show example solution
/* spinning loader */
.loader {
animation-name: spin;
animation-duration: 1s;
animation-iteration-count: infinite;
}
/* pulse notice */
.notice {
animation-name: pulse;
animation-duration: 1s;
animation-iteration-count: 3;
}Test yourself
-
Which value for a continuously spinning loader?
.loader { animation-name: spin; animation-duration: 1s; animation-iteration-count: ???; }- 1
- infinite
- 0
- repeat
Show answer
infinite — Correct. infinite plays the animation forever.
-
Play it three times
.notice { animation-name: pulse; animation-iteration-count: ____; }Show answer
.notice { animation-name: pulse; animation-iteration-count: 3; } -
Match each count to its behavior
- 1
- Plays once
- 3
- Plays three times
- infinite
- Plays forever
- 0
- Never plays
-
With animation-duration: 2s and iteration-count: 3, what is the total time?
.notice { animation-name: pulse; animation-duration: 2s; animation-iteration-count: 3; }- 2 seconds
- 3 seconds
- 6 seconds
- 5 seconds
Show answer
6 seconds — Correct. 2s × 3 = 6 seconds.