animationstart Event

Do something when a CSS animation starts:

const div1 = document.getElementById("myDIV");

div1.addEventListener("animationstart", myStartFunction);

Description

The animationstart event occurs when a CSS animation starts.

Event	Occurs When
animationstart	A CSS animation has started
animationend	A CSS animation has completed
animationiteration	A CSS animation is repeated

Property	Description
animationName	The name of the animation
elapsedTime	The number of seconds an animation has been running
pseudoElement	The name of the pseudo-element of the animation

onanimationstart is a DOM Level 3 (2004) feature.

It is fully supported in all modern browsers:


Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	11