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 偽類樣式的示例。

規範

規範
CSS 過渡
CSS Transitions Level 2

另見