HTML DOM Style transitionProperty Property
The Style transitionProperty property in HTML DOM used to set the name of the CSS property for the transition effect. It can occur when a user hover over an element. It returns the transitionProperty property of an element.
Syntax:
- It returns the transitionProperty property.
object.style.transitionProperty
- It is used to set the transitionProperty property.
object.style.transitionProperty = "none | all | property | initial | inherit"
Property Values:
- none: The transition effect will not apply to any element.
- all: All elements will get a transition effect. It is a default value.
- property: It is used to specify a comma-separated value for CSS property names for the transition effect.
- initial: It sets the transitionProperty property to its default value.
- inherit: This property is inherited from its parent element.
Return Value: It returns a string representing the transitionProperty property of an element.
Example1:
html
<!DOCTYPE html> < html > < head > < title >DOM Style transitionProperty Property </ title > < style > #gfg { border: 3px solid blue; background-color: green; width: 100px; height: 50px; -webkit-transition: all 2s; /* for safari 3.1 to 6.0 */ transition: all 2s; } #gfg:hover { background-color: green; width: 200px; height: 100px; } </ style > </ head > < body > < center > < h1 style = "color:green;" > w3wiki </ h1 > < h2 > DOM Style transitionProperty Property </ h2 > < div id = "gfg" style = "color:white" > A Computer science portal for Beginner </ div > < br > < button type = "button" onclick = "Beginner()" > Click </ button > < script > function Beginner() { document.getElementById( "gfg").style.transitionProperty = "all"; // for safari 3.1 to 6.0 document.getElementById( "gfg").style.WebkitTransitionProperty = "all"; } </ script > </ center > </ body > </ html > |
Output:
Example 2:
html
<!DOCTYPE html> < html > < head > < title >DOM Style transitionProperty Property </ title > < style > #gfg { border: 3px solid blue; background-color: green; width: 100px; height: 50px; -webkit-transition: all 2s; /* for safari */ transition: all 2s; } #gfg:hover { background-color: green; width: 200px; height: 100px; } </ style > </ head > < body > < center > < h1 style = "color:green;" > w3wiki </ h1 > < h2 > DOM Style transitionProperty Property </ h2 > < div id = "gfg" style = "color:white" > A Computer science portal for Beginner </ div > < br > < button type = "button" onclick = "Beginner()" > Click </ button > < script > function Beginner() { document.getElementById( "gfg").style.transitionProperty = "width, height"; document.getElementById( "gfg").style.WebkitTransitionProperty = "width, height"; } </ script > </ center > </ body > </ html > |
Output:
Supported Browsers: The browser supported by DOM Style transitionProperty property are listed below:
- Google Chrome 26.0 and above
- Edge 12.0 and above
- Internet Explorer 10.0 and above
- Firefox 16.0 and above
- Opera 12.1 and above
- Apple Safari 9 and above
Contact Us