Style transition Property
Example
Hover over a div element to gradually change its appearance:
document.getElementById("myDIV").style.transition = "all 2s";
Try it yourself »
Definition and Usage
The transition property is a shorthand property for the four transition properties:
transitionProperty, transitionDuration, transitionTimingFunction, and transitionDelay.
Note: Always specify the transitionDuration property, otherwise the duration is 0, and the transition will have no effect.
Browser Support
The transition property is supported in Internet Explorer 10, Firefox, Opera, and Chrome.
Safari supports an alternative, the WebkitTransition property.
Note: The transition property is not supported in Internet Explorer 9 and earlier versions.
Syntax
Return the transition property:
object.style.transition
Set the transition property:
object.style.transition="property duration timing-function delay|initial|inherit"
Property Values
| Value | Description |
|---|---|
| transitionProperty | Specifies the name of the CSS property the transition effect is for |
| transitionDuration | Specifies how many seconds or milliseconds the transition effect takes to complete |
| transitionTimingFunction | Specifies the speed curve of the transition effect |
| transitionDelay | Defines when the transition effect will start |
| 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: | all 0 ease 0 |
|---|---|
| Return Value: | A String, representing the transition property of an element |
| CSS Version | CSS3 |
Related Pages
CSS reference: transition property
Style Object
