YouTip

# Style transition Property [ Style Object](#) ## Example Hover over the 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 setting the four transition properties: transitionProperty, transitionDuration, transitionTimingFunction, and transitionDelay. **Note:** Always set the transitionDuration property, otherwise the duration is 0 and no transition effect will occur. * * * ## Browser Support  Internet Explorer 10, Firefox, Opera, and Chrome support the transition property. Safari supports an alternative property for this, the WebkitTransition property. **Note:** Internet Explorer 9 and earlier versions do not support the transition property. ## Syntax Get the transition property: _object_.style.transition Set the transition property: _object_.style.transition="_property duration timing-function delay_|initial|inherit" ## Property Values | Value | Description | | --- | --- | | _(#)_ | Specifies the name of the CSS property to which the transition effect is applied. | | _(#)_ | Specifies how many seconds or milliseconds a transition effect takes to complete. | | _(#)_ | Specifies the speed curve of the transition effect. | | _(#)_ | Defines when the transition effect will start. | | initial | Sets this property to its default value. See (#). | | inherit | Inherits this property from its parent element. See (#). | ## Technical Details | Default Value: | all 0 ease 0 | | --- | | Return Value: | A String, representing the transition property of an element. | | CSS Version | CSS3 | * * * ## Related Articles CSS Reference: (