使用JavaScript訪問CSS動畫播放狀態

Question

在附加到#profile的動畫結束時，我想啟動附加到#design的動畫，如何從動畫播放狀態更改附加到#design的外部css：paused; 動畫播放狀態：運行; 使用事件監聽器（見下文）。 我堅持下一部分（之后（“設計”）。任何幫助表示贊賞。

document.getElementById("profile").addEventListener("webkitAnimationEnd", function(){ 
var animation = document.getElementById("design")

Answer 1

擴展代碼以在JavaScript中使用樣式對象屬性animationPlayState 。 您不必再使用webkitAnimationEnd事件，因為現在支持跨瀏覽器的animationend事件。

 var animation = document.getElementById("design"); var profile = document.getElementById("profile"); profile.addEventListener("animationend", function() { animation.style.animationPlayState = "running"; }); 

 #profile, #design { animation: moveRight; animation-duration: 2s; } #design { animation-play-state: paused; } @keyframes moveRight { from { margin-left: 0; } to { margin-left: 100px; } } 

 <div id="profile">Profile</div> <div id="design">Design</div>