CSSAnimation: animationName property

The animationName property of the CSSAnimation interface returns the animation-name. This specifies one or more keyframe at-rules which describe the animation applied to the element.

Value

A string.

Examples

Returning the animationName

The animation in the following example is defined in CSS with the name slide-in. Calling Element.getAnimations() returns an array of all Animation objects. The animationName property returns the name given to the animation, in our case slide-in.

css

.animate {
  animation: slide-in 0.7s both;
}

@keyframes slide-in {
  0% {
    transform: translateY(-1000px);
  }
  100% {
    transform: translateY(0);
  }
}

js

let animations = document.querySelector(".animate").getAnimations();
console.log(animations[0].animationName);

Specifications

Specification
CSS Animations Level 2
# dom-cssanimation-animationname

Browser compatibility

BCD tables only load in the browser