1：基本概念

在一定時間內平滑的過渡，也就是圓滑的以動畫效果改變css的屬性值。它的過渡可以由滑鼠點選、焦點獲取或者失去、被點選事件或對元素的改變中觸發；不能主動觸發，只能被動觸發。

常用的基本屬性有：Transition-duration（過渡時間）、Transition-property （過渡css屬性名稱）、Transition-delay（過渡開始時間）、貝塞爾曲線、Transition-timing-function（過渡效果時間曲線）和Transition（簡寫設定四個屬性）。

2：瀏覽器相容

3：Transition-duration

必須搭配transition-property同時使用，因為要指定一個過渡的一個屬性才能使用；預設值是0。

  transition-duration: s | ms;

4：Transition-property

必須搭配transition-duration同時使用；預設值是all（所有屬性都獲取過渡效果）；除此之外Transition-duration的值還可以是none（沒有過渡效果）、property（特定屬性獲得過渡效果，多個屬性用逗號隔開；）。

不是所有的CSS屬性都支援transition-property：all；支援的都有一個明確的臨界：

 background-color、background-position
 border-color、border-width、border-spacing
 clip
 color
 crop
 font-size、font-weight
 height、width、line-height
 right、left、bottom、top
 margin、padding
 max-height、max-width、min-height、min-width
 outline-color、outline-offset、outline-width
 text-indent、text-shadow、vertical-align、word-spacing、letter-spacing
 visibility
 opacity
 z-index
 

5：Transition-delay（延遲多長時間才然後才去執行轉換的過程）

 transition-delay: s | ms;

6：貝塞爾曲線

• 應用於二維圖形應用程式的數學曲線
• 繪製貝塞爾曲線
• 函式形式的貝塞爾曲線
  • 一階貝塞爾曲線
  • 二階貝塞爾曲線
  • 三階貝塞爾曲線
• cubic-bezier(n1, n2, n3, n4)
  • P0 (0, 0)
  • P1 (1, 1)
  • P2 (n1, n2)
  • P3 (n3, n4)
• 曲線上點的切線的斜率對應的運動速度

7：Transition-timing-function（時間過渡曲線）

 transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n1, n2, n3, n4);
 

• 預設ease
• n1、n2、n3、n4取值，官方推薦（0-1）
• linear - 以相同速度過渡 - cubic-bezier（0, 0, 1, 1） / cubic-bezier（1, 1, 0, 0）
• 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 - 慢速開始、慢速結束、幅度比ease大 - cubic-bezier（0.42, 0, 0.58, 1）
• cubic-bezier(n, n, n, n) - 自定義速度函式（n介於0和1）

資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com

8：侷限性與優勢

優點：簡單易用 ；

侷限性：

• transition需要事件觸發，所以不能在網頁載入是自動發生；也就是說不能主動觸發，只能被動觸發。
• transition是一次性的，不能重複發生，除非一再觸發。
• 只能定義開始和結束的屬性值，不能定義中間狀態，也就是說只有兩個狀態。

本篇文章主要分享了Transition的基本概念，Transition相關的數學基礎，在此基礎上介紹了duration、property、delay、timing-function常用屬性， 以及總結了Transition的優缺點。