CSS3 Transitions

« Previous Chapter 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 Cursor over the element below:

CSS3
Transition

Browser Support

Property Browser Support
transition -webkit- -webkit-  -o- 

Internet Explorer and Firefox does not yet support the transition property.

Chrome and Safari requires the prefix -webkit-. Opera requires the prefix -o-.

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 and Chrome: */
-o-transition: width 2s; /* Opera: */
}

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

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;
-o-transition: width 2s, height 2s,-o-transform 2s;
}

Transition Properties

The Below 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 and Chrome: */
-webkit-transition-property: width;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 2s;
/*Opera: */
-o-transition-property: width;
-o-transition-duration: 1s;
-o-transition-timing-function: linear;
-o-transition-delay: 2s;
}

Example

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

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

« Previous Chapter Next Chapter »
Have Any Suggestion? We Are Waiting To Hear from YOU!

Your Query was successfully sent!