YouTip

# Style transitionProperty Property [ Style Object](#) ## Example Hover over the div element, its width and height will gradually change: document.getElementById("myDIV").style.transitionProperty="width,height"; [Try it Yourself »](#) * * * ## Definition and Usage The transitionProperty property specifies the name of the CSS property to which the transition effect is applied. (The transition effect starts when the specified CSS property value changes). **Tip:** Transition effects usually occur when the user hovers over an element. **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 transitionProperty property. Safari supports an alternative property for this, which is the WebkitTransitionProperty property. **Note:** Internet Explorer 9 and earlier versions do not support the transitionProperty property. * * * ## Syntax Get the transitionProperty property: _object_.style.transitionProperty Set the transitionProperty property: _object_.style.transitionProperty="none|all|_property_|initial|inherit" ## Property Values | Value | Description | | --- | --- | | none | No property will get a transition effect. | | all | Default value. All properties will get a transition effect. | | _property_ | Defines the name of the CSS property(s) to which the transition effect is applied. A comma-separated list. | | 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 | | --- | | Return Value: | A String, representing the transition-property property of an element. | | CSS Version | CSS3 | * * * ## Related Articles CSS Reference: (#) * * Style Object](#)