How do you detect when CSS animations start and end with JavaScript?

Question

I was used to animating elements with JavaScript. I found it simpler to do it with CSS3.

Using JavaScript how can you detect when a CSS animation has started and when it has ended? Is there any way at all?

Answer 1

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

Note: You may need to add the appropriate prefixed-events as well, e.g. webkitAnimationEnd