CSS: animation-play-state

The animation-play-state property controls whether a CSS animation is running or paused.

What you will learn

How to pause an animation with CSS
How a user control can toggle a running state
Why continuous motion needs a pause or reduced-motion strategy

Pause on hover

.banner {
  animation: slide 4s linear infinite;
}

.banner:hover,
.banner:focus-within {
  animation-play-state: paused;
}

The default is running. A paused animation keeps its current position until it runs again.

Common mistakes

Do not pause only on hover when keyboard or touch users also need control.
Provide a visible button for important or continuous movement.
Respect prefers-reduced-motion and avoid making motion necessary to read content.