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 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.
A string.
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);
Specification |
---|
CSS Animations Level 2 # dom-cssanimation-animationname |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
animationName |
84 | 84 | 75 | No | 70 | 13.1 | 84 | 84 | 79 | 60 | 13.4 | 14.0 |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CSSAnimation/animationName