如何使用 JavaScript 暫停和恢復 CSS3 動畫？

使用 JavaScript 暫停和恢復 CSS3 動畫

使用 JavaScript 動態操作 CSS3 動畫可以控制視覺效果的播放。以下是無需外部程式庫即可暫停和恢復 CSS3 動畫的方法：

提供的程式碼範例嘗試透過更改 webkitAnimationPlayState 屬性來暫停和恢復動畫。但是，由於持續的事件處理程序，多次嘗試可能會失敗。

使用 CSS 類別的替代方法

更有效的方法是利用 CSS 類別來控制動畫狀態。修改後的程式碼如下：

HTML:

<!-- Add the paused class initially to pause the animations by default -->
<img  alt="如何使用 JavaScript 暫停和恢復 CSS3 動畫？" >

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中文網其他相關文章！