Syntax

Animation Play State

Setting whether an animation is running or paused.

Class	Declarations
`@play:state,…`	`animation-play-state: state,…;`
`@play:running`	`animation-play-state: running;`
`@play:paused`	`animation-play-state: paused;`

<svg class="@play:running @float|3s|ease-in-out|infinite|paused">…</svg>

Basic usage

Set it to run when the animation is paused.

<svg class="@play:running @float|3s|ease-in-out|infinite|paused">…</svg>

Pauses the running animation.

<svg class="@play:paused @float|3s|ease-in-out|infinite">…</svg>

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

<div class="@play:paused:hover @play:paused@sm @play:paused@dark @play:paused@print">…</div>