CSSAnimation: animationName property
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.
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
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
animationName
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support