轉場

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

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

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

轉場屬性

瀏覽器支援

  • Chrome:26.
  • Edge:12.
  • Firefox:16.
  • Safari:9.

資料來源

如要在 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-durationtransition-duration 期間的 CSS 轉換速度。

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

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

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

Chrome 開發人員工具視覺轉換時間編輯器。

轉換延遲

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

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

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

簡寫: Transition

和多數 CSS 資源一樣,會提供簡寫版本。transition 結合 transition-propertytransition-durationtransition-timing-functiontransition-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 新增轉場效果serifmonospace 之間應該看起來會像這樣。另一方面,則可以新增 font-size 的轉場效果,因為其單位是可內插的長度。

圖形從一個狀態流暢轉換到另一個狀態的圖形,以及兩行無法流暢轉換的文字文字。

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

轉換

瀏覽器支援

  • Chrome:36.
  • Edge:12.
  • Firefox:16.
  • Safari:9.

資料來源

transform CSS 屬性是經常進行轉換的,因為這是 GPU 加速屬性,讓動畫更流暢,同時降低耗電量。這個屬性可讓您任意縮放、旋轉、平移或扭曲元素。

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

顏色

在互動發生之前、互動期間和互動後,顏色可能是狀態的重要指標。舉例來說,將遊標懸停在按鈕上時,按鈕顏色可能會改變。讓使用者知道該按鈕可點選。

colorbackground-colorborder-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 資源新增轉場效果,可能會遇到效能問題。舉例來說,當 widthheight 等屬性有所變更時,就會在網頁上其他部分推送內容。這會強制 CSS 針對每個轉場畫面的每個受影響元素計算新位置。建議盡可能改用 transformopacity 等屬性。

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

隨堂測驗

測試您對轉換的瞭解程度

哪一個轉換屬性用於指定加/減速?

transition-cubic-bezier
transition-easing
animation-ease
transition-duration
transition-timing-function

建議使用 transition-property: all

true
false

所有資源都可以轉換。

false
true