動效
動畫重複次數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-name:rotate animation-duration:1s animation-timing-function:linear animation-iteration-count:infinite"> 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-name:fade animation-duration:300ms animation-iteration-count:3"> 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-name:fade animation-iteration-count:1 animation-fill-mode:both"> 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:3@sm animation-iteration-count:1@print">...</div>