Animation Iteration Count

Style syntax for setting the number of times an animation should be played.

Overview [sr-only]

animation-iteration-count:value| / @iteration-count:value|animation-iteration-count: value
@iteration:infiniteanimation-iteration-count: infinite

Simplify the native syntax using the derived symbol.

<div class="animation-iteration-count:infinite">
<div class="@iteration:infinite">

Basic usage

Loop animation

Play the animation in an infinite loop.

<svg class="@iteration:infinite @rotate|1s|linear"></svg>

Specify N iterations

Specifies the number of times the animation iterates, even decimals.

Hover over the icon to see animation iterations

<svg class="@iteration:2.5:hover @rotate|1s|linear|forwards:hover"></svg>

Conditionally apply

Apply styles in different states using selectors, media queries, etc.

<div class="@iteration:infinite:hover @iteration:infinite@sm @iteration:infinite@dark @iteration:infinite@print"></div>
Animation Fill Mode

Style syntax for setting how a CSS animation applies styles to its target before and after its execution.

Animation Name

Style syntax for setting the names of the animation.

MIT License © Aoyue Design LLC.