Geek asks and answers

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

I was used to animate elements using JavaScript. It was easier for me to do this with CSS3.

Using JavaScript, how can you detect when CSS animation started and when it ended? Is there any way?

+5
source share
1 answer

Bind relevant events to an 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 also need to add the appropriate prefix events, for example.webkitAnimationEnd

+9
source

More articles:


All Articles