CSS3 transitions
CSS3 transitions
CSS3, we have to add an effect that can be converted from one style to another time, without the use of Flash animation or JavaScript. Mouse over the following elements:
Mouse over the following elements:
Transition
Browser Support
Figures in the table represent the first browser to support the version number of the property.
Immediately following the digital -webkit-, -ms- or -moz- ago in support of the prefix attribute first browser version number.
属性 | |||||
---|---|---|---|---|---|
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 transition is an element gradually change from one style to another effect.
To achieve this, two things must be defined:
- I want to add the effect of CSS properties
- Specify the duration of the effect.
Examples
Width attribute applied transition effect, duration of 2 seconds:
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
Note: If youdo not specify a time limit, transition will have no effect, because the default value is 0.
The effect will change the value of the specified CSS property changes. A typical CSS property change is the user mouse over an element:
Examples
Provisions when the mouse pointer suspension (: hover) to the <div> element when:
{
width: 300px;
}
try it"
Note: When the mouse cursor to the element, it gradually changes its original style
Number of changes
To add more than one effect of the change style, add attributes separated by commas:
Examples
Added width, height, and transition effects:
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
try it"
Transition Properties
The following table lists all the transition properties:
Attributes | description | CSS |
---|---|---|
transition | Shorthand property for setting four transition properties in one property. | 3 |
transition-property | The name of the CSS property transition provisions apply. | 3 |
transition-duration | To define the transition effect time spent. The default is 0. | 3 |
transition-timing-function | Predetermined transition effect time curve. The default is "ease". | 3 |
transition-delay | Provisions when to start the transition effect. The default is 0. | 3 |
The following two examples set all transition attributes:
Examples
Use all the 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"
Examples
And examples of the same transition effects above, but uses the shorthand transition properties:
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
try it"