Easy Tutorial
❮ Prop Style Columnrulestyle Jsref Entries ❯

Style transitionProperty Property

Style Object

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


Style Object

❮ Prop Style Columnrulestyle Jsref Entries ❯