CSS3 Transitions
With CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts.
Internet Explorer 10, Firefox, Chrome, and Opera supports the transition property.
Safari requires the prefix -webkit-.
Note: Internet Explorer 9, and earlier versions, does not support the transition property.
Note: Chrome 25, and earlier versions, requires the prefix -webkit-.
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.
Transition effect on the width property, duration: 2 seconds:
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
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:
Specify :hover for <div> elements:
{
width:300px;
}
Multiple changes
To add a transitional effect for more than one style, add more properties, separated by commas:
Add effects on the width, height, and the transformation:
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
