YouTip

CSS3 Transitions

In CSS3, to add an effect when changing from one style to another, we no longer need to use Flash animations or JavaScript. Move the mouse over the following element:

---

Move the mouse over the following element:

---

Browser Support

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

Numbers immediately followed by -webkit-, -ms-, or -moz- specify the first version that supported the prefixed property.

Property
transition	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-delay	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-duration	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-property	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-
transition-timing-function	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

---

How Does It Work?

A CSS3 transition is the effect of an element changing gradually from one style to another.

To achieve this, two things must be specified:

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

Example

A transition effect applied to the width property, with a duration of 2 seconds:

div {
    transition: width 2s;
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
}

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

The effect will change the value of the specified CSS property when it is changed. A typical change in a CSS property is when the user hovers over an element:

Example

Specify that when the mouse pointer hovers (:hover) over a <div> element:

div:hover {
    width: 300px;
}

Try it »

Note: When the mouse cursor moves onto the element, it gradually changes to its new style.

---

Multiple Changes

To add a transformation effect for multiple styles, add the properties separated by commas:

Example

Add width, height, and transformation effects:

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

Try it »

---

Transition Properties

The following table lists all the transition properties:

Property	Description	CSS
transition	A shorthand property for setting the four transition properties in one declaration.	3
transition-property	Specifies the name of the CSS property to which the transition is applied.	3
transition-duration	Defines the duration of the transition effect. Default is 0.	3
transition-timing-function	Specifies the speed curve of the transition effect. Default is "ease".	3
transition-delay	Specifies when the transition effect will start. Default is 0.	3

The following two examples set 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 »

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

Try it »