Style transitionProperty Property

Style 对象参考手册Style Object

Example

Hover the mouse pointer over a div element, and 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 will start when the specified CSS property changes.)

Tip:The transition effect usually occurs when the user hovers the mouse pointer over an element.

Note:Always set the transitionDuration property, otherwise the duration is 0 and no transition effect will occur.

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 10, Firefox, Opera, and Chrome support the transitionProperty property.

Safari supports an alternative property to this property, namely the WebkitTransitionProperty property.

Note:Internet Explorer 9 and earlier versions do not support the transitionProperty property.

Syntax

Return 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 a comma-separated list of CSS property names to which the transition effect is applied.
initial Sets this property to its default value. Seeinitial。
inherit Inherits this property from its parent element. Seeinherit。

Technical Details

Default Value: all
Return Value: A string representing the transition-property property of the element.
CSS Version CSS3

Related Articles

CSS Reference:transition-property Property

Style 对象参考手册Style Object

Other Extensions