Style transitionProperty attribute

Definition and usage

transitionProperty The attribute specifies the name of the CSS property that the transition effect targets (the transition effect will start when the specified CSS property changes).

Tip:When the user hovers over the element, a transition effect usually appears.

Note:Always specify transitionDuration attributeotherwise the duration is 0, and the transition will be invalid.

See also:

CSS reference manual:transition-property attribute

Example

Hover over the div element to gradually change its width and height:

document.getElementById("myDIV").style.transitionProperty = "width,height";

Try it yourself

Syntax

Return transitionProperty attribute:

object.style.transitionProperty

Set transitionProperty attribute:

object.style.transitionProperty = "none|all|property|initial|inherit"

Attribute value

Value Description
none No properties will receive the transition effect.
all Default value. All properties will receive the transition effect.
property A list of CSS property names that define the transition effects, separated by commas.
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: A string that represents the element's transition-property attribute.
CSS version: CSS3

Browser support

Table numbers indicate the first browser version that fully supports this attribute.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 10.0 16.0 6.1 12.1