Syntax

Animation Play State

Setting whether an animation is running or paused.

Overview

ClassDeclarations
@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>

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 based on different states using selectors and applying conditionally.

<div class="@play:paused:hover @play:paused@sm @play:paused@dark @play:paused@print"></div>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.