1, transition Representative css3 the transition element can gradually change from one pattern to another effect.
2, transition: height 2s; represents an element required gradient is highly height, a gradient time of 2s. FIG other transition parameters are as follows:
3, -moz -, - webkit - , - o- manufacturers is three prefixes, browse different manufacturers, because different browsers have different standards, so for compatibility, need to be commonly used for the browser vendor prefixes on. It is a means four properties represents.
-moz- Firefox browser vendor prefixes
-webkit- is Google browser vendor prefix
-o- is opera browser vendor prefixes
4、div {
width:100px;
height:30px;
background:blue;
transition:width 2s;
-moz-transition:height 2s; /* Firefox 4 */
-webkit-transition:height 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
这句话的意思是：
1) Set a div element, 100px width, height 30px, blue background, set transitions 2s.
2) generate gradient 2s when the browser is Firefox, Safari (mac comes with a browser), when Google (Chrome), triggering height changes.
3) generating gradient 2s when the browser is a word other than when the browser trigger width variation.
5, Usage: the need for a condition resulting gradient effect trigger. For example:
div: hover {
height: 100px
}
This means that, when the mouse hovers over the div element, will trigger the div element becomes 100px height of the gradient 2S; but when the mouse is removed, likewise in the height of div 2 seconds returns to 30px.
Extended Information :
transition gradient may be provided a plurality of attribute values. The width 2s, height 2s, transform 2s ;
example: when the mouse hover effect onto div, height becomes 200px, 200px width becomes, while the div element is rotated 180 degrees.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: yellow;
transition: width 2s, height 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;/* Firefox 4 */
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;/* Safari and Chrome */
-o-transition: width 2s, height 2s, -o-transform 2s;/* Opera */
}
div:hover {
width: 200px;
height: 200px;
transform: rotate(180deg);
-moz-transform: rotate(180deg);/* Firefox 4 */
-webkit-transform: rotate(180deg);/* Safari and Chrome */
-o-transform: rotate(180deg);/* Opera */
}
</style>
</head>
<body>
<div> Please put the mouse pointer over the yellow div element to view transition effects. </ div>
<P> <B> NOTE: </ b> of the present embodiment is invalid in Internet Explorer. </ P>
</ body>
</ HTML>
The overall use of the following code:
Results are as follows:
References:
MDN Technical Documentation - Use CSS transitions
Reprinted from: https: //zhidao.baidu.com/question/571327707.html