CSS3 Tutorial

CSS3 References

CSS3 Transitions

CSS3 Transitions

With CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts.

Mouse over the element below:

Browser Support

Internet Explorer does not yet support the transition property.

Firefox 4 requires the prefix -moz-.

Chrome and Safari requires the prefix -webkit-.

Opera requires the prefix -o-.

How does it work?

CSS3 transitions are effects that let an element gradually change from one style to another.

To do this, you must specify two things:

• Specify the CSS property you want to add an effect to
• Specify the duration of the effect.

Example

Transition effect on the width property, duration: 2 seconds:

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

Note: If the duration is not specified, the transition will have no effect, because default value is 0.

The effect will start when the specified CSS property changes value. A typical CSS property change would be when a user mouse-over an element:

Example

Specify :hover for <div> elements:

div:hover
{
width:300px;
}

Try it yourself »

Note: When the cursor mouse out of the element, it gradually changes back to it's original style.

Multiple changes

To add a transitional effect for more than one style, add more properties, separated by commas:

Example

Add effects on the width, height, and the transformation:

div
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}

Try it yourself »

Transition Properties

The following table lists all the transition properties:

The two examples below sets all transition properties:

Example

Use all transition properties in one example:

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}

Try it yourself »

Example

The same transition effects as above, using the shorthand transition property:

div
{
transition: width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}

Try it yourself »