CSSTransition.transitionProperty
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
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 CSSOMString.
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.
.box {
background-color: #165baa;
color: #fff;
width: 100px;
height: 100px;
transition: width 4s;
}
.box:hover {
width: 200px;
}
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
BCD tables only load in the browser