你如何检测 CSS 动画何时以 JavaScript 开始和结束？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14796936/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you detect when CSS animations start and end with JavaScript?
提问by Alex
I was used to animating elements with JavaScript. I found it simpler to do it with CSS3.
我习惯于使用 JavaScript 为元素设置动画。我发现使用 CSS3 更简单。
Using JavaScript how can you detect when a CSS animation has started and when it has ended? Is there any way at all?
使用 JavaScript 如何检测 CSS 动画何时开始以及何时结束？有什么办法吗？
回答by Prinzhorn
Bind the appropriate events to the element, e.g.
将适当的事件绑定到元素，例如
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
https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations#Using_animation_events
Note: You may need to add the appropriate prefixed-events as well, e.g. webkitAnimationEnd
注意：您可能还需要添加适当的前缀事件，例如 webkitAnimationEnd
