过渡 - HappyForEverIsaDream

 1 
 2 
 3  4  5 div
 6 {
 7 width:100px;
 8 height:100px;
 9 background:yellow;
10 transition:width 2s;
11 -moz-transition:width 2s; /* Firefox 4 */
12 -webkit-transition:width 2s; /* Safari and Chrome */
13 -o-transition:width 2s; /* Opera */
14 }
15 
16 div:hover
17 {
18 width:300px;
19 }
20 
21 
22 
23 
24 
25 
26 
请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。
27 
28 
注释：本例在 Internet Explorer 中无效。
29 
30 
31 

View Code

 1 
 2 
 3  4  5 div
 6 {
 7 width:100px;
 8 height:100px;
 9 background:yellow;
10 transition:width 2s, height 2s;
11 -moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
12 -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
13 -o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
14 }
15 
16 div:hover
17 {
18 width:200px;
19 height:200px;
20 transform:rotate(180deg);
21 -moz-transform:rotate(180deg); /* Firefox 4 */
22 -webkit-transform:rotate(180deg); /* Safari and Chrome */
23 -o-transform:rotate(180deg); /* Opera */
24 }
25 
26 
27 
28 
29 
请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。
30 
31 
注释：本例在 Internet Explorer 中无效。
32 
33 
34 

View Code

transition-timing-function