CSS3 transition-property Property

Example

Hover over a div element, and change the width with a smooth transition effect:

div
{
transition-property:width;
-webkit-transition-property:width; /*Safari and Chrome*/
-o-transition-property:width; /*Opera*/
}

div:hover {width:300px;}

Try it yourself »
More examples at the bottom of this page.

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The transition-property property is not supported in any browsers.

Safari and Chrome support an alternative, the -webkit-transition-property property.

Opera support an alternative, the -o-transition-property property.


Definition and Usage

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

Tip: A transition effect could typically occur when a user hover over an element.

Note: Always specify the transition-duration property, otherwise the duration is 0, and the transition will have no effect.

Default value: all
Inherited: no
Version: CSS3
JavaScript syntax: object.style.transitionProperty="width,height"


Syntax

transition-property: none|all|property;

Value Description
none No property will get a transition effect
all All properties will get a transition effect
property Defines a comma separated list of CSS property names the transition effect is for


Examples

Try it Yourself - Examples

Transition effect - change two properties
Hover over a div element, and change the width AND height with a smooth transition effect.