To pause and restore CSS animation, the most direct way is to dynamically switch the animation-play-state attribute using JavaScript. Controlling this property through JavaScript allows pause and playback to be achieved without restarting the painting. Specific steps include: 1. Add an event listener (such as button click); 2. Check the current animation status; 3. Dynamic switching status. In addition, if you only need to pause the animation during hover, you can implement it through the :hover pseudo-class combined with @keyframes, but this method is suitable for simple interactions and is not suitable for complex logic. For multiple animations or more complex scenes, you can process animations by index, reset animation state, or use CSS variables to manage states, while paying attention to performance impact. It is ultimately recommended to test cross-browser compatibility to ensure consistency.

To pause and resume a CSS animation, the most straightforward method is to dynamically toggle the animation-play-state property using JavaScript. This property allows you to control whether an animation is running or paused without restarting it from the beginning.

Using animation-play-state with JavaScript

The key idea is to target the animated element and switch its animation-play-state between running and paused . Here's how you can do it:

• Add an event listener (like for a button click).
• Check the current state of the animation.
• Toggle it accordingly.

 const element = document.querySelector('.animated-element');
document.querySelector('.pause-button').addEventListener('click', () => {
  if (element.style.animationPlayState !== 'paused') {
    element.style.animationPlayState = 'paused';
  } else {
    element.style.animationPlayState = 'running';
  }
});

This approach keeps things clean and works well for simple interactions like pausing on hover or clicking a button.

Pausing on Hover with Pure CSS (Limited Use)

If you just want to pause an animation when the user hovers over it — and don't need more complex controls — you can simulate this behavior by wrapping the animation inside a @keyframes rule and toggling the animation with the :hover pseudo-class.

For example:

 @keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

.animated-element {
  animation: slide 2s linear infinite;
}

.animated-element:hover {
  animation-play-state: paused;
}

While this works for basic use cases like toolstips or banners, it's not suitable for programming control or advanced UI logic.

Handling Multiple Animations or Complex Scenarios

If your element has multiple animations applied (eg, rotation and scaling), each defined with different keyframe rules, you'll need to make sure you're targeting all of them correctly.

Here are some tips:

• You can check and modify individual animations by index if needed.
• Resetting or replaying animations from the start requires removing and re-adding the animation class or inline style.
• Consider using CSS variables or utility classes to manage play/pause states more cleanly in larger projects.

Also, keep in mind that changing the animation state too frequently or applying many animations at once might affect performance, especially on mobile devices.

Final Notes

Using animation-play-state gives you direct control over animation playback without disrupting timing. Whether you're building a game, interactive tutorial, or just adding visual feedback, this technique is reliable and easy to implement. Just remember to test across browsers to ensure consistent behavior.

Basically that's it.

The above is the detailed content of How can you pause and resume a CSS animation?. For more information, please follow other related articles on the PHP Chinese website!