Motion
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
Use animation-play-state:running to ensure an animation is active when another state may pause it.
<div class="animation-duration:1s animation-iteration-count:infinite animation-name:rotate animation-play-state:running"> Running</div>Generated CSS
@layer utilities { .animation-play-state\:running { animation-play-state: running }}Pause animation
Use animation-play-state:paused when an animation should stop without resetting its current frame.
<button class="animation-duration:1s animation-iteration-count:infinite animation-name:rotate animation-play-state:paused:hover"> Pause on hover</button>Pause nonessential motion
Pause decoration when the user is interacting with the control or when the motion would compete with a more important state.
<div class="animation-play-state:running animation-play-state:paused:focus-within"> Interactive panel</div>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="animation-play-state:paused:hover animation-play-state:paused@print animation-play-state:running@sm">...</div>