CSS transition-property attribute

Definition and Usage

The transition-property property specifies the name of the CSS property that applies the transition effect. (The transition effect will start when the specified CSS property changes).

Tip:Transition effects usually occur when the user floats the mouse pointer over the element.

Note:Always set transition-duration Properties, otherwise no transition effect will occur if the duration is 0.

See Also:

CSS Tutorial:CSS Transition

HTML DOM Reference Manual:transitionProperty Property

Example

Place the mouse pointer over the div element, and a smooth transition effect changing the element's width will occur:

div {
  transition-property: width;
}

Try It Yourself

CSS Syntax

transition-property: none|all|property;

Property Value

Value Description
none No properties will receive the transition effect.
all All properties will receive the transition effect.
property A list of CSS properties that define the application of the transition effect, separated by commas.

Technical Details

Default Value: all
Inheritance: no
Version: CSS3
JavaScript Syntax: object.style.transitionProperty="width,height"

Browser Support

The numbers in the table indicate the first browser version that fully supports the property.

Numbers with -webkit-, -moz-, or -o- prefixes indicate the first version using the prefix.

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-