轉場

CSS Podcast - 044: Transitions

與網站互動時，您可能會注意到許多元素都有「狀態」state。舉例來說，下拉式選單可能是開啟或關閉狀態。聚焦或懸停時，按鈕的顏色可能會改變。視窗會出現並消失。

根據預設，CSS 會立即切換這些狀態的樣式。

透過 CSS 轉換，我們可以插入元素的初始狀態和目標狀態之間。兩者之間的轉場效果可以提供視覺化方向、支援和提示，說明互動的原因和效果，進而提升使用者體驗。

轉換屬性

如要在 CSS 中使用轉場效果，您可以使用各種轉場屬性或 transition 簡短屬性。

轉換屬性

transition-property 屬性會指定要轉換的樣式。

.my-element {
  transition-property: background-color;
}

transition-property 接受一或多個 CSS 屬性名稱 (以半形逗號分隔的清單)。

或者，您也可以使用 transition-property: all 來指示每個屬性都應進行轉換。

轉換時間長度

transition-duration 屬性用來定義轉換作業完成的時間長度。

transition-duration 接受以秒 (s) 或毫秒 (ms) 表示的時間單位，預設為 0s。

轉換時間功能

使用 transition-timing-function 屬性即可在 transition-duration 內變更 CSS 轉換速度。

根據預設，CSS 會以穩定速度 (transition-timing-function: linear) 轉換元素。線性轉場效果最後可能會產生某種人為感覺，但在現實生活中，物體的權重和無法立即停止。盡量減少轉換過程，讓轉換過程更加生動自然。

我們的 CSS 動畫模組提供了時間函式的完整總覽。

您可以使用DevTools即時測試不同的時間函式。

轉換延遲

使用 transition-delay 屬性指定轉場效果的開始時間。如未指定 transition-duration，轉換將立即啟動，因為預設值為 0s。這個屬性可接受時間單位，例如秒 (s) 或毫秒 (ms)。

這個屬性適合用於延後轉場效果，只要為群組中的每個後續元素設定更長的 transition-delay，就能達成讓轉換效果。

transition-delay 也適合用於偵錯。將延遲時間設為負值，可開始更早進入時間軸。

簡稱：轉換

如同大部分的 CSS 屬性，有一個簡要版本。transition 結合 transition-property、transition-duration、transition-timing-function 和 transition-delay。

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

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

哪些資料可以或無法轉換？

編寫 CSS 時，您可以指定哪些屬性應採用動畫轉場效果。請參閱這份可繪製 CSS 屬性的 MDN 清單。

一般來說，您只能在起始和最終狀態之間有「中間狀態」的元素轉換。舉例來說，您無法為 font-family 新增轉場效果，因為我們不知道 serif 和 monospace 的「中間狀態」應是什麼樣子。另一方面，由於 font-size 的單位長度可插補，因此可以新增轉場效果。

以下列出幾個可轉換的常見屬性。

轉換

經常轉換 transform CSS 屬性是 GPU 加速屬性，可讓動畫更流暢、耗電量更低，這個屬性可讓您任意縮放、旋轉、平移或傾斜元素。

請參閱我們的函式模組中的轉換相關章節。

顏色

在互動前、互動期間和互動後，顏色都是重要的狀態指標。舉例來說，滑鼠遊標懸停的按鈕可能會變更顏色。此顏色變更可幫助使用者知道該按鈕可點選。

color、background-color 和 border-color 屬性只是少數幾個位置，會在互動時轉換顏色。

請參閱有關顏色的單元。

陰影

陰影通常會轉換來表示高度變化，例如使用者焦點不同。

請參閱陰影相關單元。

篩選器

filter 是功能強大的 CSS 屬性，可即時新增圖形效果。在不同的 filter 狀態之間切換，可能會產生一些令人驚豔的結果。

請參閱篩選器相關單元。

轉換觸發條件

CSS 必須包含狀態變更，以及會觸發狀態變更的事件，以便啟用 CSS 轉換作業。這類觸發條件的常見範例就是 :hover 虛擬類別。當使用者將遊標懸停在元素上時，系統就會比對這個虛擬類別。

下方列出的部分虛擬類別和事件，可能會觸發元素中的狀態變更。

• :hover：比對遊標是否位於元素上。
• :focus：在元素聚焦時進行比對。
• :focus-within：比對元素或其子係是否聚焦。
• :target：比對目前網址的片段與元素的 ID 相符。
• :active：與啟用元素的時機進行比對 (通常按下滑鼠鍵時才會比對)。
• class 來自 JavaScript：當元素的 CSS class 透過 JavaScript 變更時，CSS 會轉換符合資格且已變更的屬性。

進入或離開時的不同轉場效果

只要在懸停/聚焦上設定不同的 transition 屬性，就可以建立一些有趣的效果。

.my-element {
  background: red;

  /* This transition is applied on the "exit" transition */
  transition: background 2000ms ease-in;
}

.my-element:hover {
  background: blue;

  /* This transition is applied on the "enter" transition */
  transition: background 150ms ease;
}

無障礙設計注意事項

CSS 轉換並非所有人都適用。對某些人來說，轉場效果和動畫可能會造成動暈或不適。幸好，CSS 提供名為 prefers-reduced-motion 的媒體功能，可偵測使用者是否對裝置做出較少動作的偏好。

/*
  If the user has expressed their preference for
  reduced motion, then don't use transitions.
*/
@media (prefers-reduced-motion: reduce) {
  .my-element {
    transition: none;
  }
}

/*
  If the browser understands the media query and the user
  explicitly hasn't set a preference, then use transitions.
*/
@media (prefers-reduced-motion: no-preference) {
  .my-element {
    transition: transform 250ms ease;
  }
}

如要進一步瞭解這項媒體功能，請參閱我們的網誌文章「Prefers-reduced-motion: 界線更小」。

效能注意事項

使用 CSS 轉換功能時，為特定 CSS 屬性新增轉換時可能會遇到效能問題。舉例來說，當 width 或 height 等屬性有所變更時，其內容就會移到網頁上其他部分。這會強制 CSS 為轉換的每個影格計算每個受影響元素的新位置。建議您盡可能改用 transform 和 opacity 等屬性。

請參閱高效能 CSS 動畫指南，深入瞭解這個主題。

隨堂測驗

測驗您對於轉換的相關知識