CSS animation-play-state Property

Beginner
6 min read
Updated: Oct 2026
3 examples
Live preview
CSS animation-play-state property pausing a sliding box on its current frame
Definition

Definition and Usage

The animation-play-state property sets whether an animation is running or paused. Pausing freezes the current frame. Setting running again continues from that frame. It does not start over.

The initial value is running. The property is not inherited, and it is not animatable: the switch happens in one step. It applies to any element, including ::before and ::after. You still need an animation-name and a duration. This property only decides whether that animation's time moves.

Standard-track.

Not deprecated and not experimental. Baseline widely available since September 2015. Current browsers use the unprefixed property.

Syntax

CSS Syntax

One keyword, or a comma-separated list with one keyword per animation name.

syntax.css
animation-play-state: running | paused | paused, running | initial | inherit;
Values

Property Values

ValueDescriptionTry it
runningDefault. The animation's time advancesTry it
pausedFreezes the current frame. running later continues from that frameTry it
paused, runningOne state per animation, in the same order as animation-nameTry it
initialSets this property to its default value, runningTry it
inheritCopies the parent's play state only. The name and the duration are not copiedTry it

unset equals initial here, so it is running. revert uses the user-agent value, which is also running.

Approach

How to Use animation-play-state

Create an animation first. Then choose whether its clock moves.

  1. Set an animation-name that matches a @keyframes rule.
  2. Set animation-duration above 0s. A zero duration finishes before you can pause a frame.
  3. Set animation-play-state to running or paused. running is already the default.
  4. To resume, set running again. The animation continues from the paused frame.
PieceRequired?Role
Name and durationYesThere must be an animation before play state can show
runningDefaultTime advances
pausedNoHolds the frame the animation had reached
Comma listSeveral namesOne keyword per name, in the same order
Try it

Live Preview

The box is already sliding. Switch to paused and it holds the frame it is on. Switch back to running and it continues from there.

The name and the duration stay the same. Only the play state changes, so the animation does not restart.

Preview
Box

animation-play-state: running

Code

CSS Examples

Each snippet already has a name, a duration, and a repeat. The line to study is animation-play-state. Use Try It Yourself for a live editor.

Example 1 — Running and Paused

Same animation. One clock moves. The other is stopped on the first frame.

CSS
<style>
  @keyframes slide {
    0% { transform: translateX(0); }
    50% { transform: translateX(120px); }
    100% { transform: translateX(0); }
  }
  div {
    width: 80px;
    height: 80px;
    background: #1d4ed8;
    animation-name: slide;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
  .play { animation-play-state: running; }
  .freeze { animation-play-state: paused; }
</style>

<div class="play">Play</div>
<div class="freeze">Pause</div>
Try It Yourself

How It Works

  1. Same animation. Both boxes use slide, a 2s duration, and an infinite count.
  2. running moves time. .play sets the default on purpose, so that box travels and returns.
  3. paused holds a frame. .freeze is paused from the start, so it stays on the first keyframe. It has not reached the middle yet.
  4. The keyword is the only difference. Pause a box after it has already moved, and it holds that later frame instead. The live preview above does that.

Example 2 — Play While Hovered or Focused

The box starts paused. Hover it, or tab to it, and it runs. Leave it, and it freezes where it is.

CSS
<style>
  @keyframes slide {
    0% { transform: translateX(0); }
    50% { transform: translateX(120px); }
    100% { transform: translateX(0); }
  }
  div {
    width: 80px;
    height: 80px;
    background: #1d4ed8;
    animation-name: slide;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-play-state: paused;
  }
  div:hover,
  div:focus-visible {
    animation-play-state: running;
  }
</style>

<div tabindex="0">Play</div>
Try It Yourself

How It Works

  1. Start paused. animation-play-state: paused holds the box on the first frame.
  2. Play for pointer and keyboard. :hover and :focus-visible set running. tabindex="0" lets you tab to the box.
  3. Leave, and it freezes. When the pointer or focus leaves, the first rule applies again. The box keeps the frame it had reached.
  4. The next play continues. Hover or focus again and the motion picks up from that frame. It does not jump back to the start.

Example 3 — Pause One of Two Animations

The box fades, and it does not slide. paused applies only to the first name.

CSS
<style>
  @keyframes slide {
    0% { transform: translateX(0); }
    50% { transform: translateX(120px); }
    100% { transform: translateX(0); }
  }
  @keyframes fade {
    0% { opacity: 1; }
    50% { opacity: 0.25; }
    100% { opacity: 1; }
  }
  div {
    width: 80px;
    height: 80px;
    background: #1d4ed8;
    animation-name: slide, fade;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-play-state: paused, running;
  }
</style>

<div>Both</div>
Try It Yourself

How It Works

  1. Two rules. slide changes transform. fade changes opacity.
  2. List the names. animation-name: slide, fade runs both, in that order.
  3. Pair the play states. paused, running pauses slide and lets fade continue. The box fades in place.
  4. A single keyword would cover both. animation-play-state: paused repeats for every name, so both would freeze. Write one keyword per name when they should differ.

Edge Cases & Pitfalls

If pause seems to do nothing, or play seems to jump backward, check these.

frame

A box that starts paused sits on frame one

Time never advanced, so the first keyframe is the frozen frame. Let it run, then set paused, when you want a later frame.

reset

running does not restart

Resume continues from the paused frame. Changing animation-name, or removing the animation, starts it over. animation-name: none also drops the frozen styles.

short

The shorthand resets this property

animation: slide 2s infinite leaves out the play state, so it becomes running. Put paused in the shorthand, or set animation-play-state after it.

list

One paused pauses every animation

A shorter list repeats. With two names, paused freezes both. Use paused, running when only the first should stop. This is not animation-fill-mode. Fill mode holds styles outside the active time. Play state holds time while the animation is still active.

hover

Hover alone misses keyboard and touch

Pair :hover with :focus-visible and a focusable element. A looping animation can also be hard to read. prefers-reduced-motion is how a visitor asks for less motion.

Compatibility

Browser Support

animation-play-state is a browser animation property. Node.js, Deno, and Bun do not apply it.

✓ Baseline · Since Sep 2015

animation-play-state

Unprefixed: Chrome 43+, Firefox 16+, Safari 9+, Edge 12+, Opera 30+. Internet Explorer 10+. Samsung Internet 4+.

98% Unprefixed support
Google Chrome 43+ · 3+ with -webkit-
Full support
Mozilla Firefox 16+ · 5+ with -moz-
Full support
Apple Safari 9+ · 4+ with -webkit-
Full support
Microsoft Edge 12+
Full support
Opera 30+ · 15+ with -webkit-
Full support
Samsung Internet 4+
Full support
Internet Explorer 10+
Full support
animation-play-state Widely supported

Bottom line: Safe unprefixed in current browsers. Safari 4–8, Chrome 3–42, and Firefox 5–15 needed a prefix on animation-play-state and on @keyframes. Internet Explorer 10 supports running and paused.

Remember

Key Takeaways

  • Role: running advances time. paused holds the current frame.
  • Resume: running continues from the paused frame. It does not restart.
  • Needs an animation: set a name and a duration above 0s. The default play state is running.
  • Lists: one keyword per name, in order. A shorter list repeats. The property is not inherited.

One line: animation-play-state pauses the clock on the current frame, and running starts that same clock again.

Frequently Asked Questions

It sets whether an animation's time is moving. running plays it. paused freezes it on the current frame.
The initial value is running. The property is not inherited, and it is not animatable.
No. A paused animation continues from the frame where it stopped. To start over, change animation-name or remove the animation and apply it again.
paused keeps the animation and holds the current frame. animation-name: none removes the animation, so the element returns to its normal styles.
Yes. List one play state per name, in the same order, such as paused, running. A single paused applies to every animation, because a shorter list repeats.
Unprefixed support is Chrome 43+, Firefox 16+, Safari 9+, Edge 12+, and Opera 30+. Internet Explorer 10 and Samsung Internet 4 also support it. It is a browser property. Node.js, Deno, and Bun do not apply it.

Next: animation-timing-function

Control how the animation speeds up and slows down between keyframes.

animation-timing-function tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

CSS animation-name Property CSS animation-timing-function Property