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

【问题标题】：Access CSS animation play state using JavaScript使用 JavaScript 访问 CSS 动画播放状态
【发布时间】：2015-10-21 19:28:00
【问题描述】：

在附加到#profile 的动画结束时，我想启动附加到#design 的动画，我将如何从动画播放状态更改附加到#design 的外部css：暂停；到动画播放状态：正在运行；使用事件监听器（见下文）。我坚持下一部分（在（“设计”之后）。任何帮助表示赞赏。

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

【问题讨论】：

标签： javascript css css-animations

【解决方案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>

【讨论】：