CSS3 transition property

Place the mouse pointer over the div element and its width will gradually change from 100px to 300px:

div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}

Give it a try yourself

Browser support

Internet Explorer 10, Firefox, Opera, and Chrome support transition properties.

Safari supports the alternative -webkit-transition property.

Note: Internet Explorer 9 and earlier browsers do not support the transition property.

Definitions and usages

The transition property is a short-case property that sets four transition properties:

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

Note: Always set the transition-duration property, otherwise a length of 0 will not have a transition effect.

Grammar

transition: property duration timing-function delay;