CSSAnimation
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
The CSSAnimation
interface of the Web Animations API represents an Animation
object.
Instance properties
This interface inherits properties from its parent, Animation
.
CSSAnimation.animationName
Read only-
Returns the animation name as a string.
Instance methods
This interface inherits methods from its parent, Animation
.
Examples
Inspecting the returned CSSAnimation
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. In our case this returns a CSSAnimation
object, representing the animation created in CSS.
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]);
Specifications
Specification |
---|
CSS Animations Level 2 # the-CSSAnimation-interface |
Browser compatibility
BCD tables only load in the browser