CSS animation-play-state Property

The animation-play-state property determines whether a CSS animation is actively playing or frozen in time.

selector { animation-play-state: running | paused; }

running	The animation proceeds as normal according to the other animation properties defined.
paused	The animation is suspended at its current position in the timeline.

Code Examples

This basic example causes a rotating square to pause whenever the user hovers their mouse cursor over it.

<style>
.orbit {
  width: 100px;
  height: 100px;
  background: #3498db;
  margin: 50px;
  animation: rotate 4s infinite linear;
}
.orbit:hover {
  animation-play-state: paused;
}
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>
<div class="orbit"></div>

This advanced example uses JavaScript to read the computed style and toggle the playback state of a loading spinner via a button click.

<style>
#loader {
  width: 60px;
  height: 60px;
  border: 8px solid #f3f3f3;
  border-top: 8px solid #222222;
  border-radius: 50%;
  animation: spin 1s infinite linear;
}
</style>
<div id="loader"></div>
<button onclick="toggleAnim()">Toggle Motion</button>
<script>
function toggleAnim() {
  const el = document.getElementById("loader");
  const isPaused = window.getComputedStyle(el).animationPlayState === "paused";
  el.style.animationPlayState = isPaused ? "running" : "paused";
}
</script>

Pro Tip

You can create a fully functional play/pause toggle without any JavaScript by using a hidden HTML checkbox. Use the :checked pseudo-class on the checkbox combined with a sibling selector to swap the animation-play-state value between "running" and "paused".

Deep Dive

Think of this property as the Play and Pause buttons on your TV remote. When set to "paused", the animation freeze-frames exactly where it is in the timeline. It does not reset to the beginning. When you toggle it back to "running", the animation picks up right where it left off. This is a local control for the animation clock. It is particularly useful when you want to stop an animation based on user interaction, like hovering over an element or clicking a button, without losing the current progress of the movement.

Best Practices

Use this property to give users control over moving parts of your interface. If you have a rotating banner or a decorative background animation, it is good practice to allow users to pause it. You can easily trigger this using the :hover pseudo-class to pause an element when the user is trying to focus on it.

Common Pitfalls

A common mistake is thinking that "paused" resets the animation. It does not. If you want to go back to the start, you have to manipulate the animation-name or use JavaScript to restart the element. Also, keep in mind that even if an animation is paused, the browser might still keep the element on its own compositor layer, which uses memory.

Accessibility

Moving content can be a major distraction or even a health trigger for some users. Always provide a way to stop animations. You should also check for the "prefers-reduced-motion" media query. If the user has requested less motion in their system settings, you should default your animation-play-state to "paused" or remove the animation entirely.

Dev Data Table: animation-play-state property

default	running
animatable	no
inherited	no
experimental	no
year_intro	2009
year_standard	2013
js_syntax_1	element.style.animationPlayState = "paused";
js_syntax_2	element.style.setProperty("animation-play-state", "paused");
js_note	When manipulating this property via JavaScript, ensure the animation-name is already applied to the element or the change will have no visible effect.
browsers	{ "Chrome": 43, "Edge": 12, "Firefox": 16, "Safari": 9, "Opera": 30, "Chrome Android": 43, "Safari on iOS": 9, "Samsung Internet": 4, "Opera Mobile": 30 }