CssHow-ToBeginner · 3 min read

How to Pause Animation in CSS: Simple Guide

To pause an animation in CSS, use the animation-play-state property and set it to paused. This stops the animation at its current frame until you set it back to running.

📐

Syntax

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

animation-play-state: running; — The animation plays normally.
animation-play-state: paused; — The animation pauses at its current frame.

css

selector {
  animation-name: example;
  animation-duration: 4s;
  animation-play-state: paused; /* or running */
}

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

Output

A box with a background color that does not change because the animation is paused.

💻

Example

This example shows a colored box that changes color continuously. When you hover over the box, the animation pauses, and when you move the mouse away, it resumes.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Pause Animation Example</title>
<style>
  .box {
    width: 150px;
    height: 150px;
    background-color: red;
    animation-name: colorChange;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-play-state: running;
    transition: border 0.3s;
  }
  .box:hover {
    animation-play-state: paused;
    border: 4px solid black;
  }
  @keyframes colorChange {
    0% { background-color: red; }
    50% { background-color: yellow; }
    100% { background-color: red; }
  }
</style>
</head>
<body>
  <div class="box" tabindex="0" aria-label="Color changing box that pauses animation on hover or focus"></div>
</body>
</html>

Output

A red square that smoothly changes to yellow and back continuously. When hovered or focused, the color stops changing and a black border appears.

⚠️

Common Pitfalls

Many forget to set animation-play-state back to running, so the animation stays paused unintentionally. Also, pausing an animation that is not running has no visible effect. Remember to use it on elements with active animations.

Another mistake is trying to pause animations using display: none or visibility: hidden, which stops rendering but does not pause the animation state.

css

/* Wrong way: animation never resumes */
.box {
  animation-play-state: paused;
}

/* Right way: toggle on hover */
.box {
  animation-play-state: running;
}
.box:hover {
  animation-play-state: paused;
}

📊

Quick Reference

Use these tips to control animation pause:

Set animation-play-state: paused; to stop animation.
Set animation-play-state: running; to resume animation.
Combine with events like :hover or JavaScript for interactive control.
Works only on elements with CSS animations applied.

✅

Key Takeaways

Use animation-play-state: paused to stop CSS animations at the current frame.

Set animation-play-state: running to resume paused animations.

Combine animation-play-state with user interactions like hover for control.

Pausing only works on elements with active CSS animations.

Avoid hiding elements to pause animations; use animation-play-state instead.