animation-play-state
Controls CSS animation play and pause. Use apsp to pause on hover or toggle with JavaScript.
Class List
| Class | CSS | Description |
|---|---|---|
apsr | animation-play-state: running | Default. Animation plays normally |
apsp | animation-play-state: paused | Paused at current frame |
Class Details
apsranimation-play-state: running
Default. Animation plays normally. Used to resume a paused animation.
<!-- Default: animation running -->
<div class="apsr">
Animation plays normally
</div>
<!-- Resume (JS combination) -->
<div :class="isPaused ? 'apsp' : 'apsr'">
Toggle play/pause
</div>apspanimation-play-state: paused
Pauses animation at the current frame. Applying apsr again resumes from the paused position.
<!-- Pause animation -->
<div class="apsp">
Frozen at current frame
</div>
<!-- Pause on hover -->
<div class="hover-apsp">
Animation pauses on hover
</div>Pause on hover
hover-apsp pauses on mouse over and resumes on mouse out. Useful for infinite rotation, sliders, etc.
Usage Patterns
Patterns for controlling animation playback with hover, JavaScript, etc.
<!-- Pause rotation animation on hover -->
<div class="hover-apsp">
Rotating element — pauses on hover
</div>
<!-- JavaScript toggle -->
<div :class="isPaused ? 'apsp' : 'apsr'">
Control play/pause with button
</div>
<button @click="isPaused = !isPaused">
{{ isPaused ? 'Play' : 'Pause' }}
</button>
<!-- Slider: pause on hover -->
<div class="oh">
<div class="df hover-apsp">
<div>Slide 1</div>
<div>Slide 2</div>
<div>Slide 3</div>
</div>
</div>Tips & Notes
paused remembers the position
Switching from apsp to apsr resumes from the paused position, not from the beginning.
Accessibility consideration
Continuous animations can be uncomfortable for some users. Consider the prefers-reduced-motion media query.