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
Transition
Browser Support
| Property | Browser Support | ||||
|---|---|---|---|---|---|
| transition | |||||
Internet Explorer does not yet support the transition property.
Firefox 4 requires the prefix -moz-.
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;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}
{
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
}
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
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:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer.</p>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping an pasting the code above.
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:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div
{
width:100px;
height:100px;
background:red;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}
div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer.</p>
<div>Hover over me to see the transition effect!</div>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
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:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div
{
width:100px;
height:100px;
background:red;
transition-property:width;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-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;
}
div:hover
{
width:200px;
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer.</p>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>
<p><b>Note:</b> The transition effect will wait 2 seconds before starting.</p>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Example
The same transition effects as above, using the shorthand transition property:
<html>
<head>
<style type="text/css">
div
{
width:100px;
height:100px;
background:red;
transition-property:width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}
div:hover
{
width:200px;
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer.</p>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>
<p><b>Note:</b> The transition effect will wait 2 seconds before starting.</p>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
