Example
Speed up the transition effect:
document.getElementById("myDIV").style.transitionDuration = "1s";
Try it Yourself »
Definition and Usage
The transitionDuration property sets or returns how many seconds (s) or milliseconds (ms) a transition effect takes to complete.
Browser Support
The transitionDuration property is supported in Internet Explorer 10, Firefox, Opera, and Chrome.
Safari supports an alternative, 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 how many seconds or milliseconds a transition effect takes to complete. Default value is 0, meaning there will be no effect |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Technical Details
| Default Value: | 0 |
|---|---|
| Return Value: | A String, representing the transition-duration property of an element |
| CSS Version | CSS3 |
Related Pages
CSS reference: transition-duration property
< Style Object