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

Tutorial:

CSS3 Animations

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

❮ Previous Event Properties Next ❯