CSS Animation Events in JavaScript

Learn how to detect animation events in JavaScript

Photo by Pankaj Patel on Unsplash

In JavaScript we can detect animation events . The list of available animation events are

  • animationstart → Triggered when an animation is started
  • animationiteration → Triggered on each iteration of animation
  • animationend → Triggered at the end of animation
  • animationcancel → Triggered when an action is removed(not completely implemented in all browsers)


Let’s understand this is real world example . Consider we have an div which will move from left to right

We will add all the events to the square div

https://gist.github.com/Jagathishrex/b7d101eeefbd2da13ffb7596f860eb46#file-animationevent-js

Once all the event is registered it will print animation status message , whenever the status of the animation changes

We can get the current animation name using animationName property of

The complete code can be found here

Follow Javascript Jeep🚙💨

Leave a comment

Design a site like this with WordPress.com
Get started