CSS3 Transitions

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			-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; } 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; -o-transition: width 2s, height 2s,-o-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 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; } Try it yourself »

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: */ } Try it yourself »