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?

Yes the other question is about transitions which answer is the event: transitionend, but this question is about animationend — jscripter
– jscripter, Commented Mar 19, 2014 at 11:59

Prinzhorn · Accepted Answer · 2013-02-10 10:57:17Z

53

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

answered Feb 10, 2013 at 10:57

Prinzhorn

22.6k7 gold badges65 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related