Style transitionProperty attribute

Definition and Usage

transitionProperty The attribute specifies the name of the CSS property for which the transition effect is targeted (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 the transitionProperty attribute:

object.style.transitionProperty

Set the transitionProperty attribute:

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

Property 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 defining 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 representing the transition-property attribute.
CSS Version: CSS3

Browser Support

The numbers in the table indicate the first browser version to fully support this attribute.

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