HTML | DOM TransitionEvent propertyName Property
The TransitionEvent propertyName property is a read-only property and used for returning the name of the CSS property associated with a transition when a transitionevent occurs.
Return Value: It returns a string which represents the name of the transition.
Syntax :
event.propertyName
Below program illustrates the TransitionEvent propertyName Property :
Example: Getting the property name associated with the transition.
<!DOCTYPE html> < html > < head > < title >TransitionEvent propertyName Property </ title > < style > #MyDiv { width: 100px; height: 20px; background: green; transition: 3s; } #MyDiv:hover { width: 300px; } h1 { color: green; } h2 { font-family: Impact; } body { text-align: center; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 >TransitionEvent propertyName Property</ h2 > < p >Hover over the element to see the name of the CSS property the transition effect is for. </ p > < div id = "MyDiv" ></ div > < script > document.getElementById("MyDiv").addEventListener( "transitionend", myevent); function myevent(event) { // Return CSS property name. this.innerHTML = "CSS Property used: " + event.propertyName; } </ script > </ body > </ html > |
Output:
Before clicking the button:
After clicking the button:
Supported Browsers:
- Opera
- Internet Explorer
- Google Chrome
- Firefox
- Apple Safari