Style transitionProperty
Property
Example
When the mouse pointer is hovered over the div element, its width and height will gradually change:
Definition and Usage
The transitionProperty
property specifies the name of the CSS property to which the transition effect is applied. (The transition effect will start when the specified CSS property changes).
Tip: Transition effects usually occur when the user hovers the mouse pointer over the 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, WebkitTransitionProperty
.
Note: Internet Explorer 9 and earlier versions do not support the transitionProperty
property.
Syntax
Return the transitionProperty
property:
Set the transitionProperty
property:
Property Values
Value | Description |
---|---|
none | No properties will get a transition effect. |
all | Default value. All properties will get a transition effect. |
property | Defines a comma-separated list of CSS property names to which the transition effect is applied. |
initial | Sets this property to its default value. See initial |
inherit | Inherits this property from its parent element. See inherit |
Technical Details
Default value: | all |
---|---|
Return value: | String, representing the transition-property property of the element. |
--- | --- |
CSS Version | CSS3 |
--- | --- |
Related Articles
CSS Reference: transition-property Property