CSS3 transition
May 04, 2021 CSS3
Table of contents
CSS3 transition
CSS3 transition
In CSS3, we don't need flash animation or JavaScript to add an effect that can be transitioned from one style to another. Mouse over the following elements:
Mouse over the following elements:
Transition
Browser support
The numbers in the table support the first browser version number of the property.
The number immediately before -webkit-, -ms- or -moz- is the first browser version number that supports the prefix property.
| Attributes | |||||
|---|---|---|---|---|---|
| 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?
The CSS3 transition is the gradual change of an element from one style to another.
To achieve this, two elements must be specified:
-
Specify the CSS properties to add the effect
-
Specifies the duration of the effect.
Transition effect applied to width properties for 2 seconds:
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
Note: If the term is not specified, transition will have no effect because 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:
Specifies that when the mouse pointer hovers (:hover) on the element:
{
width:300px;
}
Try it out . . .
Note: When the mouse cursor moves to the element, it gradually changes its original style.
Multiple changes
To add a transformation effect for multiple styles, the added properties are separated by commas:
Added width, height, and conversion effects:
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
Try it out . . .
The transition property
The following table lists all the transition properties:
| Property | Describe | Css |
|---|---|---|
| transition | A short-case property that sets 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 | Define how long the transition takes. The default is 0. | 3 |
| transition-timing-function | A time curve that specifies the transition effect. The default is "ease". | 3 |
| transition-delay | Specify when the transition effect will begin. The default is 0. | 3 |
The following two examples set all transition properties:
Use all transition properties in one example:
{
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;
}
Try it out . . .
The transition effect is the same as in the example above, but uses the short transition property:
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
Try it out . . .
If you still don't know much about the CSS3 transition, we recommend that you do more practice by "try it out" above.