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
變化:當元素的 CSSclass
透過 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 動畫指南,深入瞭解這個主題。
隨堂測驗
測試您對轉換的瞭解程度
哪一個轉換屬性用於指定加/減速?
transition-duration
transition-cubic-bezier
animation-ease
transition-easing
transition-timing-function
建議使用 transition-property: all
所有資源都可以轉換。