Animation Play State

Style syntax for setting whether an animation is running or paused.

Overview [sr-only]

animation-play-state:state, / @play:state,animation-play-state: state,
@play:runninganimation-play-state: running
@play:pausedanimation-play-state: paused
<svg class="@play:running @float|3s|ease-in-out|infinite|paused"></svg>

Simplify the native syntax using the derived symbol.

<div class="animation-play-state:paused">
<div class="@play:paused">

Basic usage

Play animation

Set it to run when the animation is paused.

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

Pause animation

Pauses the running animation.

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

Conditionally apply

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

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

Style syntax for setting the names of the animation.

Animation Timing Function

Style syntax for setting speed curve of the animation.

MIT License © Aoyue Design LLC.