CSS animation-play-state Property

CSS animation-play-state Property

The animation-play-state property in CSS controls whether an animation is running or paused. It allows you to start, stop, or resume an animation dynamically.

1. Syntax

selector {
  animation-play-state: value;
}

2. Accepted Values

Value	Description
running (default)	The animation is playing normally.
paused	The animation is stopped at its current frame until it is resumed.

3. Example – Pausing an Animation on Hover

.box {
  width: 100px;
  height: 100px;
  background: red;
  animation: move 3s infinite;
}

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

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

✅ The animation stops when hovering over the box.

4. Example – Toggle Animation with JavaScript

document.getElementById("toggle").addEventListener("click", function() {
  let box = document.querySelector(".box");
  box.style.animationPlayState = box.style.animationPlayState === "paused" ? "running" : "paused";
});

✅ Clicking a button pauses and resumes the animation dynamically.

5. Best Practices

✔ Use paused for interactive elements (e.g., pause on hover).
✔ Combine with JavaScript to give users control over animations.
✔ Ensure animations resume properly when using animation-play-state.