CSS 過渡
CSS transition 模組規定了用於建立不同 CSS 屬性值之間平滑過渡的功能。可以透過指定它們的緩動函式、持續時間和其他值來控制這些過渡的行為。
通常,當 CSS 屬性值改變時,舊值到新值的變化結果是即時的。CSS transition 模組允許在指定的時間段內控制舊屬性狀態到新狀態的漸進過程。它還提供了事件處理程式,允許程式碼在過渡達到不同階段時執行。
在某些情況下,過渡沒有起始“from”值。例如,如果一個元素被新增到 DOM 中,定義的樣式是針對“to”狀態的。本模組提供了 @starting-style at-rule,它可以在這種情況下定義起始樣式。該模組還定義了離散屬性值應如何過渡,例如將離散動畫的 display 屬性從 none 值過渡到顯示的某個值。
參考
屬性
At-rules
介面
指南
- 使用 CSS 過渡
-
循序漸進的教程,解釋如何使用 CSS 建立過渡。本文描述了每個相關的 CSS 屬性,並解釋了它們之間如何相互作用。
- 動畫
display -
在離散動畫的
display屬性的none值之間進行過渡。 - 過渡浮層和過渡
<dialog> -
從
@starting-style過渡到最終:popover-open和:open偽類樣式的示例。
相關概念
-
calc-size()函式 -
固有大小 詞彙表術語
-
CSS 緩動函式模組
<easing-function>資料型別
-
CSS animations 模組。
-
CSS transforms 模組。
規範
| 規範 |
|---|
| CSS 過渡 |
| CSS Transitions Level 2 |