CSS animation-play-state Property

What You’ll Learn

The animation-play-state property lets you pause or resume a CSS animation without removing it. It is useful for hover effects, play buttons, and interactive UI controls.

Definition and Usage

The animation-play-state CSS property controls whether an animation is running or paused. When paused, the animation stops at its current frame and keeps that visual state until playback resumes.

This property is especially helpful when you want user interaction to control motion. For example, you can pause a loader until the user hovers over it, or add a button that toggles animation playback with a CSS class.

📝 Syntax

Set animation-play-state to running or paused:

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

Basic Example

@keyframes move {
  from { transform: translateX(0); }
  to { transform: translateX(200px); }
}

.box {
  animation: move 4s infinite;
  animation-play-state: paused;
}

.box:hover {
  animation-play-state: running;
}

Syntax Rules

• The initial value is running, so animations play by default.
• paused freezes the animation at its current frame.
• Setting the value back to running resumes from the same point.
• You can use pseudo-classes like :hover or :focus-within to change play state.
• For multiple animations, list values in the same order as other animation properties.

Default Value

The initial value of animation-play-state is running. Animations play normally as soon as they start, unless you explicitly set the value to paused.

💎 Property Values

These are the main values used to control animation playback.

Pause vs Stop

Beginners often confuse pausing an animation with removing it entirely. They behave differently:

running vs paused

Examples Gallery

Try animation-play-state with hover playback, button toggles, parent controls, and multiple animations.

<style>
  @keyframes move {
    from { transform: translateX(0); }
    to { transform: translateX(200px); }
  }
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: move 4s infinite;
    animation-play-state: paused;
  }
  .box:hover {
    animation-play-state: running;
  }
</style>

<div class="box"></div>

<style>
  .spinner {
    animation: spin 1s linear infinite;
    animation-play-state: running;
  }
  .spinner.is-paused {
    animation-play-state: paused;
  }
</style>

<button id="toggleBtn">Pause</button>
<div class="spinner" id="spinner"></div>

.gallery {
  animation-play-state: running;
}

.gallery.is-paused {
  animation-play-state: paused;
}

.gallery.is-paused * {
  animation-play-state: inherit;
}

.badge {
  animation-name: fadeIn, pulse;
  animation-duration: 0.6s, 1.5s;
  animation-iteration-count: 1, infinite;
  animation-play-state: running, paused;
}

💡 Best Practices