Style transitionDuration Property
Example
Speed up the transition effect:
document.getElementById("myDIV").style.transitionDuration="1s";
Try it Yourself »
Definition and Usage
The transitionDuration property sets or returns the time (in seconds or milliseconds) required to complete a transition effect.
Browser Support
![]()
Internet Explorer 10, Firefox, Opera, and Chrome support the transitionDuration property.
Safari supports an alternative property, the WebkitTransitionDuration property.
Syntax
Return the transitionDuration property:
object.style.transitionDuration
Set the transitionDuration property:
object.style.transitionDuration="time|initial|inherit"
Property Values
| Value | Description |
|---|---|
| time | Specifies the time (in seconds or milliseconds) required to complete the transition effect. The default value is 0, meaning no effect will occur. |
| initial | Sets this property to its default value. Seeinitial。 |
| inherit | Inherits this property from its parent element. Seeinherit。 |
Technical Details
| Default Value: | 0 |
|---|---|
| Return Value: | A string representing the element's transition-duration property. |
| CSS Version | CSS3 |
Related Articles
CSS Reference:transition-duration property
Other Extensions
Style Object