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 10, Firefox, Chrome, and Opera supports the transition property.

Safari requires the prefix -webkit-.

Note: Internet Explorer 9, and earlier versions, does not support the transition property.

Note: Chrome 25, and earlier versions, requires the prefix -webkit-.

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;
-webkit-transition: width 2s; /* Safari */
}

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;
-webkit-transition: width 2s, height 2s, -webkit-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;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}

Try it yourself »

Example

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

div
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}

Try it yourself »