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