過渡transition
（一）過渡transition
在對元素進行樣式的改變時有時候想要讓她的過程進行的緩慢些，形成一個動畫效果，因此可以使用transition屬性。
（1）transition-property屬性：指定需要進行過渡效果的屬性（是css屬性）。
Transition-property的屬性值可以是任意css屬性，而且可以寫多個屬性，只需要用逗號隔開即可，若是有過多的需要過渡的屬性，可以用all。
（2）transition-duration屬性：過渡效果所需的時長，單位是秒（s）/毫秒（ms）。
Demo1：小div當滑鼠移入時往右移300px，同時移入移出位置的變化都有一個過渡效果。
<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .out { width: 300px; height: 200px; border: 1px solid #f0f; margin: 10px auto; } .out>div { width: 100px; height: 100px; } .posi { position: relative; } .posi>div { /* */ /* 要移動div，使用定位移動 */ position: absolute; /* 初始位置 */ left: 0; top: 0; } .posi:hover>div { /* 懸浮後位置 */ left: 300px; } /* 過渡在父元素身上 */ .box1>div { background-color: #ff0; } .box1:hover>div { transition: left 2s; } /* 過渡在需要過渡的元素身上 */ .box2>div { background-color: blueviolet; transition: left 2s; } /* 不是在父元素上滑鼠懸浮使子元素過渡效果下位移，而是對子元素滑鼠懸浮進行位移會產生的效果 */ .box3{ position: relative; } .box3>div { position: absolute; background-color: rgb(55, 224, 97); left: 0; transition: left 2s; } .box3>div:hover{ left: 300px; } </style> </head>
<body> <div class="out posi box1"> <div>過渡在需要過渡效果的父盒子身上</div> </div> <div class="out posi box2"> <div>過渡在需要過渡效果的元素身上</div> </div> <div class="out ex box3"> <div> 滑鼠懸浮在子元素身上 </div> </div> </body>
</html>
效果：
- box1滑鼠一移出父盒子，瞬間回到原位，沒有返回的過渡效果
- Box2滑鼠移出父盒子，由一個過渡的效果回到原位
- Box3過渡盒子一移出滑鼠就開始返回，過渡盒子一在滑鼠上就開始右移，這樣反覆來回，致使盒子抖動，且需要滑鼠跟著盒子移動盒子才能移動。
（3）transition-timing-function屬性：過渡的速度曲線（速度函式）。控制過渡效果在元素身上的變化速度。
屬性值：
①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)）。
⑤linear：規定以相同速度開始至結束的過渡效果（等於 cubic-bezier(0,0,1,1)）。
⑥貝塞爾曲線cubic-bezier(n,n,n,n)：在 cubic-bezier 函式中定義自己的值。可能的值是 0 至 1 之間的數值。
⑦步驟steps（n）：把過渡效果分成五部，一步一步跳過來
（4）transition-delay屬性：延遲執行過渡效果的時間。單位秒
（5）transition屬性：過渡的複合屬性，簡寫屬性。
屬性值順序：過度的屬性 過渡時長 過渡的速度方式 過度的延遲時間。（前一個秒數是過渡時長，後一個秒數是延遲時長）
注意：
①若是隻有發生滑鼠懸浮等操作時要發生過渡效果，則寫在元素要做出對應操作的選擇器中，若是操作結束也想要元素效果慢慢回到原來的樣子就把過渡寫在需要過渡的元素身上，而不寫在操作上。
②請始終設定transition-duration屬性，否則時長為 0，就不會產生過渡效果。
③display屬性沒有過渡效果
④若是需要過渡的元素
DEMO1:方塊變橢圓並往右移動300px
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 .box{ 10 width: 500px; 11 height: 200px; 12 border: 1px solid #f00; 13 } 14 .box>div{ 15 width: 100px; 16 height: 100px; 17 background-color: rgb(157, 143, 170); 18 transition: all 3s; 19 } 20 .box:hover div{ 21 background-color: rgb(245, 140, 149); 22 width: 200px; 23 border-radius: 50%; 24 margin-left: 300px; 25 } 26 </style> 27 </head> 28 <body> 29 <div class="box"> 30 <div></div> 31 </div> 32 </body> 33 </html>
DEMO2：在圖片中，當滑鼠懸浮時，從下往上移一段文字覆蓋圖片，但是能看到底部圖片，同時滑鼠移入移出都有一個過渡效果。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 .box{ 10 width: 300px; 11 height: 300px; 12 border: 1px solid rgb(90, 62, 247); 13 position: relative; 14 overflow: hidden; 15 } 16 img{ 17 width: 300px; 18 height: 300px; 19 } 20 p{ 21 width: 300px; 22 height: 300px; 23 background-color: rgba(255, 252, 82, 0.4); 24 position: absolute; 25 top: 300px; 26 left: 0; 27 margin: 0; 28 transition: top 3s; 29 } 30 .box:hover p{ 31 top:0 ; 32 } 33 </style> 34 </head> 35 <body> 36 <div class="box"> 37 <img src="../過渡/images/haha.webp" alt=""> 38 <p> 39 曾經我也是靠臉吃飯的<br> 40 真的。。。<br> 41 直到有一天<br> 42 我快餓死了<br> 43 才好好工作的 44 </p> 45 </div> 46 </body> 47 </html>