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

Question

我习惯用JavaScript来动画元素。我发现用CSS3做起来更简单。

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

Answer 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