CSSAnimation
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
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 CSSOMString
.
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
.
.animate {
animation: slide-in 0.7s both;
}
@keyframes slide-in {
0% {
transform: translateY(-1000px);
}
100% {
transform: translateY(0);
}
}
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