YouTip

CSS3 Transitions

In CSS3, to add a certain effect when transitioning from one style to another, we do not need to use Flash animation or JavaScript. Hover over the element below with your mouse:

---

Hover over the element below with your mouse:

Transition

---

Browser Support

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

Numbers followed by -webkit-, -ms- or -moz- specify the first version that worked with a prefix.

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 CSS transition is an effect that lets an element gradually change from one style to another.

To do this, you must specify two things:

• The CSS property you want to add an effect to.
• 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; }

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

The change occurs when the value of a specified CSS property changes. A typical change of a CSS property is when a 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 over the element, its style will gradually change.

---

Multiple Changes

To add multiple transformation effects, add the properties, separated by a comma:

Example

Add a transition effect for width, height, and transformation:

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 property.	3
transition-property	Specifies the name of the CSS property the transition effect is for.	3
transition-duration	Specifies how many seconds or milliseconds a transition effect takes to complete. 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

Using all the transition properties in one example:

div { transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; -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 the example above, but using the shorthand transition property:

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

Try it »