過渡 & 動畫
transition-delay
用於控制 CSS 過渡延遲的實用工具。
| 類別 | 樣式 |
|---|---|
delay-<數字> | transition-delay: <數字>ms; |
delay-(<自訂屬性>) | transition-delay: var(<自訂屬性>); |
delay-[<值>] | transition-delay: <值>; |
範例
基本範例
使用 delay-150 和 delay-700 等實用工具，以毫秒為單位設定元素的過渡延遲
將滑鼠懸停在每個按鈕上以查看預期的行為
delay-150
delay-300
delay-700
<button class="transition delay-150 duration-300 ease-in-out ...">Button A</button><button class="transition delay-300 duration-300 ease-in-out ...">Button B</button><button class="transition delay-700 duration-300 ease-in-out ...">Button C</button>使用自訂值
使用 delay-[<值>] 語法 來設定過渡延遲，基於完全自訂的值
<button class="delay-[1s,250ms] ..."> <!-- ... --></button>對於 CSS 變數，您也可以使用 delay-(<自訂屬性>) 語法
<button class="delay-(--my-delay) ..."> <!-- ... --></button>這只是 delay-[var(<自訂屬性>)] 的簡寫，會自動為您新增 var() 函式。
響應式設計
前綴使用 transition-delay 實用工具 加上像是 md: 的斷點變體，以便僅在中等 螢幕尺寸以上套用該實用工具
<button class="delay-150 md:delay-300 ..."> <!-- ... --></button>深入瞭解如何在變體文件中使用變體。
