CSS3 transition Property

Example

Hover over a div element to gradually change the width form 100px to 300px:

div
{
width:100px;
transition: width 2s;
-webkit-animation: width 2s; /*Safari and Chrome*/
-o-animation: width 2s; /*Opera*/
}
div:hover {width:300px;}

Try it yourself »

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The transition property is not supported in any browsers.

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

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


Definition and Usage

The transition property is a shorthand property for the four transition properties:

transition-property, transition-duration, transition-timing-function, and transition-delay.

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

Default value: all 0 ease 0
Inherited: no
Version: CSS3
JavaScript syntax: object.style.transition="width 2s"


Syntax

transition: property duration timing-function delay;

Value Description
transition-property Specifies the name of the CSS property the transition effect is for
transition-duration Specifies how many seconds or milliseconds the transition effect takes to complete
transition-timing-function Specifies the speed curve of the transition effect
transition-delay Defines when the transition effect will start