轉場

CSS Podcast - 044：轉場

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

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

透過 CSS 轉換，我們可以在初始狀態和元素目標狀態之間插入內插。這兩者之間有了轉折，就能提供視覺方向、支援和提示，說明互動原因和影響，進而提升使用者體驗。

轉場屬性

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

轉換資源

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

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

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

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

transition-duration

transition-duration 屬性可用來定義轉換程序所需時間。

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

transition-timing-function

使用 transition-timing-function 屬性可變更 transition-duration 在 transition-duration 期間的 CSS 轉換速度。

根據預設，CSS 會以固定速度 (transition-timing-function: linear) 轉換元素。線性轉換最終可能會使人像以人為方式轉換。在現實生活中，物體的重量無法一蹴可幾，而且無法立即停止。切換轉場或退出轉場效果，可讓轉場效果更加生動自然。

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

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

轉換延遲

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

這個屬性適用於交錯的轉場效果，方法是為群組中的後續元素設定較長的 transition-delay。

transition-delay 也很適合用於偵錯。將延遲時間設為負值，系統就能展開更深入的時間軸轉換。

簡寫： Transition

和多數 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：比對元素的啟用時間 (通常是在 並按下滑鼠。
• JavaScript 的 class 變化：當元素的 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;
  }
}

如要進一步瞭解這項媒體功能，請參閱我們的網誌文章「prefered-motion：有時靜止不動」。

效能注意事項

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

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

隨堂測驗

測試您對轉換的瞭解程度