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
CSS3 Transitions Browser Support
| Property |
Browser Support |
| transform |
|
|
|
|
|
Internet Explorer and Firefox does not yet support the transition property.
Chrome and Safari requires the prefix -webkit-. Opera requires the prefix -o-
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.
Transitions 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.
To add a transitional effect for more than one style, add more properties, separated by commas:
Multiple Changes 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;
}
The two examples below sets all transition properties:
All Transitions 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;
}
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: */
}
