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-positionborder-color、border-width、border-spacingclipcolorcropfont-size、font-weightheight、width、line-heightright、left、bottom、topmargin、paddingmax-height、max-width、min-height、min-widthoutline-color、outline-offset、outline-widthtext-indent、text-shadow、vertical-align、word-spacing、letter-spacingvisibilityopacityz-index

5：Transition-delay(延遲多長時間才然后才去執行轉換的過程)

transition-delay: s | ms;

6：貝塞爾曲線

• 應用于二維圖形應用程序的數學曲線
• 繪制貝塞爾曲線
• 函數形式的貝塞爾曲線

1 一階貝塞爾曲線

2 二階貝塞爾曲線

3 三階貝塞爾曲線

• cubic-bezier(n1, n2, n3, n4)

1 P0 (0, 0)

2 P1 (1, 1)

3 P2 (n1, n2)

4 P3 (n3, n4)

• 曲線上點的切線的斜率對應的運動速度
• http://cubic-bezier.com/ - 可視化cubic-bezier編輯

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)

8：局限性與優勢

優點：簡單易用 ；

局限性：

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

?

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