使用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（“设计”）；
var profile=document.getElementById（“profile”）；
addEventListener（“animationend”，function（））{
animation.style.animationPlayState=“正在运行”；
})；

#配置文件，
#设计{
动画：右移；
动画持续时间：2秒；
}
#设计{
动画播放状态：暂停；
}
@关键帧向右移动{
从{
左边距：0；
}
到{
左边距：100px；
}
}

Profile
设计