CSS3 transition
CSS3 transition
In CSS3, we don’t need to use Flash animation or JavaScript when we can switch from one style to another in order to add an effect. Mouse over the following elements:
Mouse over the following elements:
CSS3 transition
Browser support
The number in the table represents the first browser version number that supports the property.
The number immediately preceding -webkit- , -ms- , or -moz- is the first browser version number that supports the prefix attribute.
Attribute |
|||||
|---|---|---|---|---|---|
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?
A CSS3 transition is the effect of a gradual change of elements from one style to another.
To achieve this, two things must be specified:
Specify the CSS property to which you want to add an effect
Specifies the duration of the effect.
Example
The transition effect applied to the width attribute for a period of 2 seconds:
div
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
Note: if the specified time limit is not specified transition , there will be no effect because the default value is 0.
The effect changes when the value of the specified CSS property changes. A typical change in the CSS attribute is when the user mouse over an element:
Example
Specifies that when the mouse pointer hovers (: hover) in the <div> on the element:
div:hover
{
width:300px;
}
Note: when the mouse cursor moves over the element, it gradually changes itsoriginal style
Multiple changes
To add the transformation effect of multiple styles, the added attributes are separated by commas:
Example
Added width, height and conversion effect:
div
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
Transition attribute
The following table lists all the transition properties:
Attribute |
Description |
CSS |
|---|---|---|
Transition |
Shorthand property, which is used to set four transition properties in one property. |
3 |
Transition-property |
Specifies the name of the CSS attribute to which the transition is applied. |
3 |
Transition-duration |
Define the time spent on the transition effect. The default is 0. |
3 |
Transition-timing-function |
Specify the time curve of the transition effect. Default is “ease”. |
3 |
Transition-delay |
Stipulate when the transition effect begins. The 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 transition effect is the same as the above example, but using the abbreviated transition attributes:
div
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}