CSS allows you to create animations with transitions and keyframes. However, CSS does not provide a way to perform a callback when an animation is complete. With JavaScript, it’s possible to detect the end of a CSS transition or animation and then trigger a function.
If we organize the type of events we would like to listen for we can create a function to capture a specific type of animation or transition to pass to a callback function.
Example
For instance, say you’d like to have a method run after a CSS transition that collapses an element by changing its max-height property. In this example, a click event will add a class to a container element that displays the transition.
Once it is complete, a callback function will be run.
