CSS3 Transition
CSS3 transitions
In CSS3, we can change from one style to another in order to add an effect without using Flash animations or JavaScript.
Browser support
The numbers in the table represent the first browser version number that supports the property.
The number immediately preceding -webkit-, -ms- or -moz- is the version number of the first browser that supports the prefixed attribute.
| 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?
CSS3 transitions are the effect of elements gradually changing from one style to another.
To achieve this, two things must be specified:
Specify the CSS property to add the effect to
Specifies 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; /* Safari */
}Note: If the duration is not specified, the transition will have no effect, since the default value is 0.
The effect changes when the value of the specified CSS property changes. A typical CSS property change is when the user mouses over an element:
Example
Specifies that when the mouse pointer hovers (:hover) over a <div> element:
div:hover
{
width:300px;
}Note: When the mouse cursor moves over the element, it gradually changes its original style
Multiple changes
To add multiple styles of transform effects, add properties separated by commas:
Example
Added width, height and transition effects:
div
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}Transition properties
The following table lists all transition properties:
| Property | Description | CSS |
|---|---|---|
| transition | Shorthand property for setting four transition properties in one property. | 3 |
| transition-property | Specifies the name of the CSS property to which the transition is applied. | 3 |
| transition-duration | Defines how long the transition effect takes. Default is 0. | 3 |
| transition-timing-function | Specifies the time curve of the transition effect. The default is "ease". | 3 |
| transition-delay | Specifies when the transition effect starts. Default is 0. | 3 |
The following two examples set 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 */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}
Example
The same transition effect as the example above, but using the shorthand transition property:
div
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}