transition(過渡)

 transition:過渡　

　　渡過渡原理：原始狀態a狀態-向-最終結束狀態b狀態

　　格式：transition: all 1s linear; 

過渡的四個參數：
一、參與過渡的屬性（屬性（width）/all）

　　值 　　　　　　 描述

　　linear 　　 　　 動畫從頭至尾的速度是相同的，linear慢慢開始過渡併成線性方式顯示

　　ease 　　　　  默認。動畫以低速開始，而後加快，在結束前變慢。

　　ease-in　　       動畫以低速開始。

　　ease-out            動畫以低速結束。

　　ease-in-out      動畫以低速開始和結束。

 注：cubic-bezier(n,n,n,n)     在 cubic-bezier 函數中有本身的值。可能的值是從 0 到 1 的數值。

二、過渡的時間s，須要加上時間單位 過渡的類型。

三、過渡的效果類型

四、延遲執行的時間

-webkit-transition:all 1s linear; （chrome，safari（蘋果））
-ms-transition:all 1s linear; （IE 微軟）
-moz-transition:all 1s linear; （Firefox）
-o-transition:all 1s linear; （歐鵬）

 

 注：display: none (or block); display 屬性是沒有過渡效果的，所以在須要過渡的地方不能用它作爲顯示和隱藏的屬性;能夠用visibility: visible/hidden 或 opacity：0-1來進行顯示隱藏。