CSS3 Transition

CSS3 Transition

In CSS3, we can add an effect that transitions an element from one style to another without using Flash animations or JavaScript. Hover your mouse over the element below:

Hover your mouse over the element below:

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

The numbers preceding -webkit-, -ms-, or -moz- indicate the first browser version that supports the prefixed property.

How It Works

CSS3 transitions allow elements to gradually change from one style to another.

To achieve this, you must specify two things:

• The CSS property to which you want to add an effect
• The duration of the effect

Example

Transition effect applied to the width property, lasting 2 seconds:

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

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

The effect changes when the specified CSS property's value changes. A typical change occurs when the user hovers the mouse over an element:

Example

Specifies that when the mouse pointer hovers over a <div> element:

div:hover {
    width: 300px;
}

Note: When the mouse cursor moves over the element, it gradually changes its original style.

Multiple Changes

To add multiple transition effects, separate the properties with commas:

Example

Adds transition effects to width, height, and transform:

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

Transition Properties

The following table lists all the transition properties:

The following two examples set all transition properties:

Example

Using all transition properties in one example:

div {
    transition-property: width;
    transition-duration: 2s;
    transition-timing-function: linear;
    transition-delay: 1s;
}

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;

Example

The same transition effect as above, but using the shorthand transition property:

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