⏯️ Mastering animation-play-state in CSS

📌 What Is animation-play-state?

The animation-play-state property allows you to pause and resume a CSS animation. This is extremely useful for interactive components, hover animations, loaders, and UI behavior that depends on user interaction.
It supports two values: running (default) and paused. 🎬✨

>>“Play-state gives you interactive control — animation becomes dynamic instead of constant.”

🧩 Basic Syntax

Syntax

animation-play-state: running;
animation-play-state: paused;

🎯 Values Explained

ValueDescriptionEffect
runningAnimation plays normally▶️ Default
pausedAnimation freezes at its current frame⏸️ Useful for hover/pause interactions

🧪 Example Animation

@keyframes example

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loader {
  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

✔ The loader spins continuously.

🎮 Pause Animation on Hover

Pause on Hover

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

✔ Hovering over the element freezes the animation.

🛠️ Resume After Pause

Resume Animation

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

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

✔ When no longer hovered, the animation resumes from the exact paused frame.

🎬 Using play-state with JavaScript

Perfect for interactive UI controls.

Pause/Play Toggle

const box = document.querySelector('.box');

function pause() {
  box.style.animationPlayState = 'paused';
}

function play() {
  box.style.animationPlayState = 'running';
}

✔ Useful for custom video-like controls, animated charts, or loaders.

🎨 Real-World Examples

1️⃣ Pausing a Floating Button

Floating Button

@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

.btn {
  animation: float 2s infinite ease-in-out;
}

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

✔ Button freezes mid-air when hovered.

2️⃣ Pausing a Scrolling Background

Background Scroll

@keyframes bgScroll {
  from { background-position: 0 0; }
  to   { background-position: -200px 0; }
}

.banner {
  animation: bgScroll 10s linear infinite;
}

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

✔ Stops scrolling when the user interacts with the banner.

3️⃣ Pause on Visibility Change (JS)

Pause animation when tab is hidden

document.addEventListener('visibilitychange', () => {
  const elm = document.querySelector('.loader');
  elm.style.animationPlayState = document.hidden ? 'paused' : 'running';
});

✔ Great for performance and battery savings.

✨ animation-play-state in Shorthand

Shorthand Example

animation: spin 1s linear infinite paused;
Shorthand PartMeaning
spinanimation-name
1sanimation-duration
linearanimation-timing-function
infiniteanimation-iteration-count
pausedanimation-play-state

🧠 Best Practices

  • Pause animations on hover for accessibility 🧑‍🦽
  • Use JS for deeper interaction controls
  • Pause animations when off-screen or invisible (performance)
  • Don’t pause critical feedback animations (e.g., error shake)
  • Ensure infinite animations do not distract users

🔍 Debugging Tips

  • Check if animation is truly running (duration must be > 0)
  • Use DevTools → Animation inspector to observe pause/resume
  • Make sure CSS specificity doesn’t override your play-state rule
  • Remember: paused keeps the current frame — it doesn’t reset

🔗 Helpful Resources

>>“Animation is motion — play-state is control.” ⏯️✨