javascript - 使用JavaScript访问CSS动画播放状态

在附加到#profile的动画的结尾，我想开始附加到#design的动画，如何从动画播放状态更改已附加到#design的外部CSS:到动画播放状态:正在运行；使用事件监听器(见下文)。我停留在下一部分(“设计”之后)，感谢您的帮助。

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

最佳答案

扩展代码以在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>

关于javascript - 使用JavaScript访问CSS动画播放状态，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33256961/