How Can I Pause and Resume CSS3 Animations Using JavaScript?

Pause and Resume CSS3 Animation with JavaScript

Manipulating CSS3 animations dynamically using JavaScript offers control over the playback of visual effects. Here's how you can pause and resume CSS3 animations without external libraries:

The provided code sample attempts to pause and resume animations by altering the webkitAnimationPlayState property. However, multiple attempts may fail due to ongoing event handlers.

Alternative Method using CSS Class

A more efficient approach is to leverage a CSS class to control the animation state. Here's how the revised code would look:

HTML:

<!-- Add the paused class initially to pause the animations by default -->
<img>

CSS:

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

JavaScript:

function doStuff(){
    var pic1 = document.getElementById("pic1");
    var pic2 = document.getElementById("pic2");

    // Toggle the paused class to resume or pause the animation
    pic1.classList.toggle("paused");
    pic2.classList.toggle("paused");
}

This method eliminates the need to explicitly pause and resume the animation within the event handlers. By adding or removing the paused class, you can easily control the animation state.

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