HTML | DOM Style transitionDuration Property
The Style transitionDuration property in HTML DOM is used to set or return the length of time(in seconds or milliseconds) to complete the transition effect.
Syntax:
- Return the transitionDuration property:
object.style.transitionDuration
- Set the transitionDuration:
object.style.transitionDuration = "time|initial|inherit"
Property Values:
- time:It is used to specify how much time it will take to complete transition effect.The default value is 0(no transition effect).
- initial: Sets the element to its initial position.
- inherit: It is used to set property from its parent element.
Example: Set transitionDuration property.
HTML
<!DOCTYPE html> < html > < head > < title > HTML | DOM Style transitionDuration Property </ title > < style > #element { width: 100px; height: 70px; background: green; transition-property: width; } #element:hover { width: 400px; height: 100px; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 >TransitionDuration Property</ h2 > < p > Move mouse over the green box and it will change! </ p > < div id = "element" > < h3 >transition-duration:5s</ h3 > </ div > < script > function myFunction() { // Set transitionDuration 5 second. document.getElementById( "element").style.transitionDuration = "5s"; } myFunction() </ script > </ body > </ html > |
Output:
- Before Transition:
- After Transition:
Supported Browsers: The browser supporte by HTML | DOM Style transitionDuration Property are listed bwlow:
- Google Chrome 26
- Edge 12
- Internet Explorer 10
- Firefox 16
- Opera 12.1
- Safari 9