你如何检测 CSS 动画何时以 JavaScript 开始和结束？

【问题标题】：How do you detect when CSS animations start and end with JavaScript?你如何检测 CSS 动画何时以 JavaScript 开始和结束？
【发布时间】：2013-01-25 15:46:21
【问题描述】：

我习惯于使用 JavaScript 为元素制作动画。我发现使用 CSS3 更简单。

使用 JavaScript 如何检测 CSS 动画何时开始以及何时结束？有什么办法吗？

【问题讨论】：

@BenjaminGruenbaum 过渡！== 动画
是的，另一个问题是关于过渡的，答案是事件：transitionend，但这个问题是关于动画结束

标签： javascript css animation

【解决方案1】：

将适当的事件绑定到元素，例如

el.addEventListener("animationstart", function() {}, false);
el.addEventListener("animationend", function() {}, false);
el.addEventListener("animationiteration", function() {}, false);

https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations#Using_animation_events

注意：您可能还需要添加适当的前缀事件，例如webkitAnimationEnd

【讨论】：