Animation Play

Control animation play state

Syntax

visual="animation-play:[value]"

Values

Value	CSS Output	Description
running	animation-play-state: running	Animation running
paused	animation-play-state: paused	Animation paused

Examples

<div visual="animate:spin hover:animation-play:paused">Pause on hover</div>

Preview

Animation Play State

visual="animation-play:paused" - Pause or resume animations

running

paused

View Code

<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div space="p:small" visual="bg:primary text:white rounded:small animate:spin animation-play:running">running</div>
  <div space="p:small" visual="bg:primary text:white rounded:small animate:spin animation-play:paused">paused</div>
</div>