animation-play-state
Setting whether an animation is running or paused.
Overview
| Class | Declarations |
|---|---|
animation-play-state:running | animation-play-state: running;
|
animation-play-state:paused | animation-play-state: paused;
|
animation-play-state:<state>,<…> | animation-play-state: <state>,<…>;
|
Examples
Run an animation
Check Run indicator to set the child SVG’s play state to running. Uncheck it to pause at the current position.
<!-- Native checkbox · run and pause --><div class="animation-play-state:running:has(input:checked)>svg@screen@motion"> <label class="block mb-sm font-sm"><input type="checkbox" class="mr-xs accent-color-blue outline:2px|solid|var(--color-blue):focus-visible outline-offset:3px:focus-visible">Run indicator</label> <svg id="target" aria-hidden="true" width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2" class="text-blue animation:rotate|2s|linear|infinite animation-play-state:paused animation:none@print"> <circle cx="24" cy="24" r="17" opacity=".25" /> <path d="M24 8v16h12 M19 13l5-5 5 5" /> </svg></div>Generated CSS
@layer utilities { .animation-play-state\:running { animation-play-state: running }}The checkbox is a real keyboard control. This example starts paused and permits running only on screen when the user has not requested reduced motion.
Pause animation
Start the indicator with the checkbox, then hover the stationary panel to pause its child. Move away to resume from the same frame.
<!-- Run, then hover the stable panel --><div class="animation-play-state:running:has(input:checked)>div>svg@screen@motion animation-play-state:paused:has(input:checked)>div:hover>svg@screen@motion"> <label class="block mb-sm font-sm"><input type="checkbox" class="mr-xs accent-color-blue outline:2px|solid|var(--color-blue):focus-visible outline-offset:3px:focus-visible">Run indicator</label> <div class="p-sm b:1px|dashed|var(--color-line-muted) r-sm"> <p class="mb-sm font-sm">Hover this panel to pause</p> <svg id="target" aria-hidden="true" width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2" class="text-blue animation:rotate|2s|linear|infinite animation-play-state:paused animation:none@print"> <circle cx="24" cy="24" r="17" opacity=".25" /> <path d="M24 8v16h12 M19 13l5-5 5 5" /> </svg> </div></div>The panel keeps a stable hit area while the SVG rotates. The checkbox also pauses the animation on touch devices and with the keyboard; hover is an additional affordance.
Pause nonessential motion
Start the indicator, then focus the Project name field. The editor’s focus-within state pauses the decorative child while you type.
<!-- Pause while editing --><div class="animation-play-state:paused:has(input:checked)>div:focus-within>svg@screen@motion animation-play-state:running:has(input:checked)>div>svg@screen@motion"> <label class="block mb-sm font-sm"><input type="checkbox" class="mr-xs accent-color-blue outline:2px|solid|var(--color-blue):focus-visible outline-offset:3px:focus-visible">Run indicator</label> <div class="p-sm b:1px|solid|var(--color-line-muted) r-sm"> <label class="block mb-sm font-sm">Project name <input type="text" value="Canvas" class="max-w:100% p-xs b:1px|solid|var(--color-line-muted) r-sm outline:2px|solid|var(--color-blue):focus-visible outline-offset:3px:focus-visible"></label> <svg id="target" aria-hidden="true" width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2" class="text-blue animation:rotate|2s|linear|infinite animation-play-state:paused animation:none@print"> <circle cx="24" cy="24" r="17" opacity=".25" /> <path d="M24 8v16h12 M19 13l5-5 5 5" /> </svg> </div></div>Play state is not inherited. The parent selector explicitly reaches the animated SVG, and the text field remains stationary and editable.
Apply conditionally
Check Run indicator and resize the viewport. The child stays paused below sm and can run at sm when motion is allowed.
<!-- Run only at sm --><div class="animation-play-state:running:has(input:checked)>svg@screen@motion@sm"> <label class="block mb-sm font-sm"><input type="checkbox" class="mr-xs accent-color-blue outline:2px|solid|var(--color-blue):focus-visible outline-offset:3px:focus-visible">Run indicator</label> <svg id="target" aria-hidden="true" width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="2" class="text-blue animation:rotate|2s|linear|infinite animation-play-state:paused animation:none@print"> <circle cx="24" cy="24" r="17" opacity=".25" /> <path d="M24 8v16h12 M19 13l5-5 5 5" /> </svg></div>Shrinking the viewport or unchecking the control pauses the current timeline. Reduced motion keeps it paused, while print removes the animation.