如何使用 JavaScript 暂停和恢复 CSS3 动画？

使用 JavaScript 暂停和恢复 CSS3 动画

使用 JavaScript 动态操作 CSS3 动画可以控制视觉效果的播放。以下是无需外部库即可暂停和恢复 CSS3 动画的方法：

提供的代码示例尝试通过更改 webkitAnimationPlayState 属性来暂停和恢复动画。但是，由于持续的事件处理程序，多次尝试可能会失败。

使用 CSS 类的替代方法

更有效的方法是利用 CSS 类来控制动画状态。修改后的代码如下：

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");
}

此方法消除了需要在事件处理程序中显式暂停和恢复动画。通过添加或删除暂停类，您可以轻松控制动画状态。

以上是如何使用 JavaScript 暂停和恢复 CSS3 动画？的详细内容。更多信息请关注PHP中文网其他相关文章！