Motion
animation-iteration-count
Setting the number of times an animation should be played.
Overview
| Class | Declarations |
|---|---|
animation-iteration-count:infinite | animation-iteration-count: infinite;
|
animation-iteration-count:<value> | animation-iteration-count: <value>;
|
Examples
Loop animation
Use animation-iteration-count:infinite when an animation should repeat until the state changes.
<div class="animation-duration:1s animation-iteration-count:infinite animation-name:rotate animation-timing-function:linear"> Loading</div>Generated CSS
@layer utilities { .animation-iteration-count\:infinite { animation-iteration-count: infinite }}Specify N iterations
Use a number for one-shot or limited loops. Decimal values are valid when you need an animation to stop partway through a cycle.
<div class="animation-duration:300ms animation-iteration-count:3 animation-name:fade"> Repeats three times</div>Pair with fill mode
When the last iteration should leave the element in its final state, combine the count with animation-fill-mode:forwards or animation-fill-mode:both.
<div class="animation-fill-mode:both animation-iteration-count:1 animation-name:fade"> Ends at the final keyframe</div>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="animation-iteration-count:infinite:hover animation-iteration-count:1@print animation-iteration-count:3@sm">...</div>