CSS3 - 對過渡（transition）進行調速，以及延時

時間  2020-07-25
標籤 css3 css 過渡 transition 進行 調速 以及 延時 欄目 CSS 简体版
原文   原文鏈接

1，使用調速函數控制過渡效果的速度曲線（加速，減速等） css

使用調速函數能夠設置過渡效果的速度曲線，從而實現過渡效果隨着時間來改變其速度。好比：開始很慢而後加速或者開始很快而後減速。


（1）CSS3定義了以下的調速函數：html

linear               規定以相同速度開始至結束的過渡效果（等於 cubic-bezier(0,0,1,1)）。
ease                規定慢速開始，而後變快，而後慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in            規定以慢速開始的過渡效果（等於 cubic-bezier(0.42,0,1,1)）。
ease-out          規定以慢速結束的過渡效果（等於 cubic-bezier(0,0,0.58,1)）。
ease-in-out      規定以慢速開始和結束的過渡效果（等於 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)    在 cubic-bezier 函數中定義本身的值。可能的值是 0 至 1 之間的數值。


（2）調速函數的使用
使用時只須要把調速函數跟在過渡屬性的時間參數後面。若是不填的話則使用默認調速函數（ease）web

1
transition: opacity  10 s ease-in-out;


（3）使用樣例1：
下面經過樣例演示各類調速函數的效果區別。鼠標移入方框，方框內的方塊會向右移動，同時方塊會旋轉，邊角變圓角，背景色和文字顏色也在改變。這些樣式的改變都會有過渡效果，同時因爲使用不一樣的調速函數，過渡的快慢也是有區別的。函數

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!doctype html>
< html  lang = "en" >
     < head >
     < title >hangge.com</ title >
     < style >
         .trans_box {
             padding: 20px;
            
             *zoom:1;
         }
 
         .trans_list {
             width: 10%;
             height: 64px;
             margin:10px 0;
            
             color:#fff;
             text-align:center;
         }
 
         .linear {
             -webkit-transition: all 4s linear;
             -moz-transition: all 4s linear;
             -o-transition: all 4s linear;
             transition: all 4s linear;
         }
 
         .ease {
             -webkit-transition: all 4s ease;
             -moz-transition: all 4s ease;
             -o-transition: all 4s ease;
             transition: all 4s ease;
         }
 
         .ease_in {
             -webkit-transition: all 4s ease-in;
             -moz-transition: all 4s ease-in;
             -o-transition: all 4s ease-in;
             transition: all 4s ease-in;
         }
 
         .ease_out {
             -webkit-transition: all 4s ease-out;
             -moz-transition: all 4s ease-out;
             -o-transition: all 4s ease-out;
             transition: all 4s ease-out;
         }
 
         .ease_in_out {
             -webkit-transition: all 4s ease-in-out;
             -moz-transition: all 4s ease-in-out;
             -o-transition: all 4s ease-in-out;
             transition: all 4s ease-in-out;
         }
 
         .trans_box:hover .trans_list, .trans_box_hover .trans_list {
             margin-left:89%;
            
             color:#333;
             -webkit-border-radius:25px;
             -moz-border-radius:25px;
             -o-border-radius:25px;
             border-radius:25px;    
             -webkit-transform: rotate(360deg);
             -moz-transform: rotate(360deg);
             -o-transform: rotate(360deg);
             transform: rotate(360deg);             
         }
     </ style >
</ head >
< div  id = "transBox"  class = "trans_box" >
     < div  class = "trans_list ease" >ease< br >(default)</ div >
     < div  class = "trans_list ease_in" >ease-in</ div >
     < div  class = "trans_list ease_out" >ease-out</ div >
     < div  class = "trans_list ease_in_out" >ease-in-out</ div >   
     < div  class = "trans_list linear" >linear</ div >
</ div >
</ html >


（4）使用樣例2：
下面經過對柱狀圖的寬度改變過渡，演示不一樣調速函數的效果區別。spa

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
< html >
< head >
< style >
div
{
margin:10px 0;
width:100px;
height:50px;
background:#2D9900;
color:white;
font-weight:bold;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
 
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
 
/* Firefox 4: */
#div1 {-moz-transition-timing-function: linear;}
#div2 {-moz-transition-timing-function: ease;}
#div3 {-moz-transition-timing-function: ease-in;}
#div4 {-moz-transition-timing-function: ease-out;}
#div5 {-moz-transition-timing-function: ease-in-out;}
 
/* Safari and Chrome: */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
 
/* Opera: */
#div1 {-o-transition-timing-function: linear;}
#div2 {-o-transition-timing-function: ease;}
#div3 {-o-transition-timing-function: ease-in;}
#div4 {-o-transition-timing-function: ease-out;}
#div5 {-o-transition-timing-function: ease-in-out;}
 
.trans_box:hover div
{
width:500px;
}
</ style >
</ head >
< body >
< div  id = "transBox"  class = "trans_box" >    
     < div  id = "div2"  style = "top:150px" >ease< br >(default)</ div >
     < div  id = "div3"  style = "top:200px" >ease-in</ div >
     < div  id = "div4"  style = "top:250px" >ease-out</ div >
     < div  id = "div5"  style = "top:300px" >ease-in-out</ div >
     < div  id = "div1"  style = "top:100px" >linear</ div >
</ div >
</ body >
</ html >


2，爲過渡增長延時code

過渡屬性還能夠添加一個可選的延時，用以將過渡的開始推遲一段時間。下面是一個等待1秒的例子。
延時1秒
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!doctype html>
< html  lang = "en" >
     < head >
     < title >hangge.com</ title >
     < style >
         .trans_box3 {
             padding: 20px;
            
             *zoom:1;
         }
 
         .trans_box3 div{
             width:100px;
             height:50px;
             background:#2D9900;
             color:white;
             font-weight:bold;
 
             -webkit-transition: all 2s ease-out 1s;
             -moz-transition: all 2s ease-out 1s;
             -o-transition: all 2s ease-out 1s;
             transition: all 2s ease-out 1s;
         }
 
         .trans_box3:hover div
         {
             width:500px;
         }
     </ style >
</ head >
< div  class = "trans_box3" > 
     < div >延時1秒</ div >
</ div >
</ html >


原文出自：www.hangge.com  轉載請保留原文連接：https://www.hangge.com/blog/cache/detail_988.htmlorm

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程