SHARE THIS PAGE

CSS3 Transitions

« Previous

Next Chapter »

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:

CSS3
Transition

Browser Support

Property	Browser Support
transition

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:

Property	Description	CSS
transition	A shorthand property for setting the four transition properties into a single property	3
transition-property	Specifies the name of the CSS property to which the transition is applied	3
transition-duration	Defines the length of time that a transition takes. Default 0	3
transition-timing-function	Describes how the speed during a transition will be calculated. Default "ease"	3
transition-delay	Defines when the transition will start. Default 0	3

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 »