CSS3 Transition

CSS3 Transitions

In CSS3, to add certain effects, we can transition from one style to another without using Flash animations or JavaScript. Move the mouse over the following elements:

Hover over the following elements:

CSS3
Transition

Browser Support

The numbers in the table indicate 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 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?

CSS3 transitions are effects that gradually change an element from one style to another.

To achieve this, two things must be specified:

  • Specify the CSS property to which you want to add the effect.
  • Specify the duration of the effect.
OperaSafariChromeFirefoxInternet Explorer

Example

A transition effect applied to the width property, with a duration of 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 the default value is 0.

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

OperaSafariChromeFirefoxInternet Explorer

Example

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

div:hover { width:300px; }

Try it Yourself »

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

Multiple Changes

To add transition effects for multiple styles, add the properties separated by commas:

OperaSafariChromeFirefoxInternet Explorer

Example

Added width, height, and transform effects:

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

Try it Yourself »

Transition Property

The following table lists all the transition properties:

Property Description CSS
transition Shorthand property, used to set four transition properties in one property. 3
transition-property Specifies the name of the CSS property to which the transition is applied. 3
transition-duration Defines the time spent on the transition effect. The default is 0. 3
transition-timing-function Specifies the timing curve of the transition effect. The default is "ease". 3
transition-delay Specifies when the transition effect will start. The default is 0. 3

The following two examples set all transition properties:

OperaSafariChromeFirefoxInternet Explorer

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 »

OperaSafariChromeFirefoxInternet Explorer

Example

Same transition effect as the example above, but using the shorthand transition property:

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

Try it Yourself »
other extensions