概念

在網頁中許多元素都會有狀態，例如： dropdown 會有開啟和關閉的狀態、按鈕會有 focused 或是 hovered 的狀態，利用 CSS transitions 可以在開始和結束狀態之間增加轉場效果。

• transition-property：要做 transition 的 CSS 屬性，可填多個屬性，以逗號區隔，也可以填 all
• transition-duration：transition 的時間長度，須加時間單位 ms 或是 s
• transition-timing-function：速度函數
• transition-delay：延遲 transition 開始的時間

transition 縮寫：

.longhand {
  transition-property: transform;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
}

.shorthand {
  transition: transform 300ms ease-in-out 0s;
}

能夠做 transition 的屬性

有中間狀態值的屬性才能夠使用 transition，例如：不能使用 font-family 屬性，CSS 無法幫我們計算 serif 轉變成 monospace 中間的轉場應該長什麽樣子，而 font-size 屬性可以，因為 CSS 可以根據單位長度計算中間值。

觸發 transition 時機

• :hover
• :focus
• focus-within
• :target
• :active
• class：透過 JavaScript 改變元素的 class

Enter / Leave

.element {
  background: red;

  /* Transition 會套用在 Leave 時，也就是當元素離開 hover 狀態時，會耗費 2000ms 變換背景 */
  transition: background 2000ms ease-in;
}

.element:hover {
  background: blue;

   /* Transition 會套用在 Enter 時，也就是當元素進入 hover 狀態時，會耗費 150ms 變換背景 */
  transition: background 150ms ease;
}

＊當 transition 屬性為 width 或是 height 時，會迫使 CSS 必須重新計算每一個 frame 每一個元素的位置，為避免這樣效能問題，建議改使用 transform 或 opacity 取代