CSSTransition: transitionProperty 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 transitionProperty property of the
CSSTransition interface returns the expanded transition property
name of the transition. This is the longhand CSS property for which the
transition was generated.
Value
A string.
Examples
Returning the transitionProperty
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. The transitionProperty property returns the property
that the transition is created for, which is width.
css
.box {
background-color: #165baa;
color: white;
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].propertyName);
});
Specifications
| Specification |
|---|
| CSS Transitions Level 2 # dom-csstransition-transitionproperty |
Browser compatibility
Loading…