CSSTransition
The CSSTransition
interface of the Web Animations API represents an Animation
object used for a CSS Transition.
Instance properties
This interface inherits properties from its parent, Animation
.
CSSTransition.transitionProperty
Read only-
Returns the transition CSS property name as a string.
Instance methods
This interface inherits methods from its parent, Animation
.
No specific methods.
Examples
Inspecting the returned CSSTransition
The transition in the following example changes the width of the box on hover. Calling Element.getAnimations()
returns an array of all Animation
objects. In our case this returns a CSSTransition
object, representing the animation created.
css
.box {
background-color: #165baa;
color: #fff;
width: 100px;
height: 100px;
transition: width 4s;
}
.box:hover {
width: 200px;
}
js
const item = document.querySelector(".box");
item.addEventListener("transitionrun", () => {
let animations = document.querySelector(".box").getAnimations();
console.log(animations[0]);
});
Specifications
Specification |
---|
CSS Transitions Level 2 # the-CSSTransition-interface |
Browser compatibility
BCD tables only load in the browser