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.
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);