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 |