animation-play-state

Definition

The animation-play-state property in CSS is used to specify whether an animation is running or paused.

The possible values for this property are:

running: This is the default value. The animation will play as normal.
paused: This will pause the animation. It can be resumed with running.

Here’s a simple example:

div {
  animation-name: example;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

@keyframes example {
  from {
    background-color: red;
  }

  to {
    background-color: yellow;
  }
}

In this example, the animation is initially paused. The background color of the div is set to animate from red to yellow, but because the animation-play-state is set to paused, the animation will not run until the animation-play-state is changed to running.

This property is particularly useful when you want to create pause/play controls for your animations.

Syntax

.progress {
  animation-play-state: paused;
}

Values

running (default) or paused.

Practical Examples

.progress:hover {
  animation-play-state: paused;
}

Pause animations on hover or when modals are hidden.

HTML

Code

<style>
@keyframes progress-demo { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.progress-demo { animation: progress-demo 3s linear infinite; transform-origin: left center; }
</style>
<div class="relative h-2 w-full overflow-hidden rounded-full bg-slate-200">
  <div class="progress-demo absolute inset-0 rounded-full bg-sky-500"></div>
</div>

Tips & Best Practices

Pause background animations when elements leave the viewport.
Toggle play state with JavaScript for interactive experiences.

Accessibility & UX Notes

Give users control over ongoing animation; pausing on hover helps with readability.

Browser Support

Supported across modern browsers.

animation-iteration-count for loop limits.
animation-delay to schedule restarts.