AnimationEvent animationName Property
Example
Get the animation name associated with an animation:
const div = document.getElementById("myDIV");
div.addEventListener("animationstart", myStartFunction);
function myStartFunction(event) {
this.innerHTML = "Animation-name is: " + event.animationName;
}
Try it Yourself »
Description
The animationName property returns the name of the animation, when an
animation event occurs.
The animationName property is read-only.
The animationName property is the value of the animation-name
CSS property.
Animation Events
| Event | Occurs When |
|---|---|
| animationstart | A CSS animation has started |
| animationend | A CSS animation has completed |
| animationiteration | A CSS animation is repeated |
Animation Properties
| 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 |
See Also:
The Animation Event Object
The Style animation Property
Tutorial:
Syntax
event.animationName
Technical Details
| Return Value: | A String. The the name of the animation. |
|---|---|
| DOM Version: | DOM Level 3 Animation Events |
Browser Support
event.animationName 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 |
