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:當元素的 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;
}
}
如要進一步瞭解這項媒體功能,請參閱我們的網誌文章「Prefers-reduced-motion: 界線更小」。
效能注意事項
使用 CSS 轉換功能時,為特定 CSS 屬性新增轉換時可能會遇到效能問題。舉例來說,當 width
或 height
等屬性有所變更時,其內容就會移到網頁上其他部分。這會強制 CSS 為轉換的每個影格計算每個受影響元素的新位置。建議您盡可能改用 transform
和 opacity
等屬性。
請參閱高效能 CSS 動畫指南,深入瞭解這個主題。
隨堂測驗
測驗您對於轉換的相關知識
哪一個轉換屬性可用來指定加/減速?
transition-duration
transition-easing
transition-cubic-bezier
transition-timing-function
animation-ease
建議使用 transition-property: all
all
可能會導致效能問題和非預期的轉換。所有資源都可以轉換。
font-family
等屬性。