HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
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:
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- |
CSS3 transition is an element gradually change from one style to another effect.
To achieve this, two things must be defined:
Width attribute applied transition effect, duration of 2 seconds:
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:
Provisions when the mouse pointer suspension (: hover) to the <div> element when:
Note: When the mouse cursor to the element, it gradually changes its original style
To add more than one effect of the change style, add attributes separated by commas:
Added width, height, and transition effects:
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:
Use all the transition properties in one example:
And examples of the same transition effects above, but uses the shorthand transition properties: