8.12.1. CSS3 transition ¶

In CSS3, we don’t need to use Flash animation or JavaScript when we can switch from one style to another in order to add an effect. Mouse over the following elements:

Mouse over the following elements:

CSS3 transition

8.12.2. Browser support ¶

The number in the table represents the first browser version number that supports the property.

The number immediately preceding -webkit- , -ms- , or -moz- is the first browser version number that supports the prefix attribute.

8.12.3. How does it work? ¶

A CSS3 transition is the effect of a gradual change of elements from one style to another.

To achieve this, two things must be specified:

• Specify the CSS property to which you want to add an effect

• Specifies the duration of the effect.

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

div:hover
{
    width:300px;
}

8.12.4. Multiple changes ¶

To add the transformation effect of multiple styles, the added attributes are separated by commas:

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

8.12.5. Transition attribute ¶

The following table lists all the transition properties:

The following two examples set all transition properties:

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;
}

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