How Can I Pause and Resume CSS3 Animations Using Only JavaScript?

Pause and Resume CSS3 Animation with JavaScript

Problem:

How to pause and resume a CSS3 animation using JavaScript without relying on external libraries?

Solution:

1. CSS Animation:

Define the animation using CSS keyframes, specifying the opacity values and timing for each step.

2. Pause and Resume Functions:

Create JavaScript functions to handle pausing and resuming the animation:

const pauseAnimation = (element) => {
  element.style.animationPlayState = "paused";
};

const resumeAnimation = (element) => {
  element.style.animationPlayState = "running";
};

3. Event Listeners:

Add event listeners to the animated elements to trigger the pause and resume actions:

document.getElementById("pic1").addEventListener("click", () => {
  pauseAnimation(document.getElementById("pic1"));
});

document.getElementById("pic2").addEventListener("click", () => {
  resumeAnimation(document.getElementById("pic2"));
});

Additional Notes:

• To ensure the animation can be paused multiple times, clear the existing event listeners before adding new ones.
• Alternatively, use the CSS class approach proposed in the provided answer:

.paused{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}

const pauseAnimation = (element) => {
  element.classList.add("paused");
};

const resumeAnimation = (element) => {
  element.classList.remove("paused");
};

This allows you to pause and resume the animation by simply toggling this CSS class without the need for event listeners.

The above is the detailed content of How Can I Pause and Resume CSS3 Animations Using Only JavaScript?. For more information, please follow other related articles on the PHP Chinese website!