Events

CSS animations emit events that we can listen to using JavaScript. These events are useful if our application contains code that depends on an animation’s state. There are some slight differences in how we attach event listeners between a vanilla project and an Angular project. Let’s start by listing the available events:

• animationstart: This is emitted when the animation starts.
• animationend: This is emitted when the animation completes.
• animationiteration: This is emitted when an iteration of the animation ends and another one begins. This event only fires for the n - 1 iteration—the last iteration of animation will fire the animationend event instead.

Notice that the event names are all in lowercase and not camel case.