Syntax

animation-iteration-count

Setting the number of times an animation should be played.

Class	Declarations
@iteration:`value`	animation-iteration-count: `value`;
`@iteration:infinite`	`animation-iteration-count: infinite;`

Simplify the native syntax using the derived symbol.

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

Basic usage

Play the animation in an infinite loop.

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

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>

Apply styles based on different states using selectors and conditional queries.

<div class="@iteration:infinite:hover @iteration:infinite@sm @iteration:infinite@dark @iteration:infinite@print">…</div>

Setting how a CSS animation applies styles to its target before and after its execution.

Setting the names of the animation.