transition-duration

範例

基本範例

使用 duration-150 和 duration-700 等工具，以毫秒為單位設定元素的過渡持續時間。

<button class="transition duration-150 ease-in-out ...">Button A</button><button class="transition duration-300 ease-in-out ...">Button B</button><button class="transition duration-700 ease-in-out ...">Button C</button>

使用自訂值

使用 duration-[<value>] 語法 來設定過渡持續時間基於完全自訂的值

<button class="duration-[1s,15s] ...">  <!-- ... --></button>

對於 CSS 變數，您也可以使用 duration-(<custom-property>) 語法

<button class="duration-(--my-duration) ...">  <!-- ... --></button>

這只是 duration-[var(<custom-property>)] 的一個簡寫，它會自動為您新增 var() 函式。

響應式設計

前綴一個 transition-duration 工具 使用像 md: 這樣的斷點變體，僅在中等 螢幕尺寸及以上套用該工具。

<button class="duration-0 md:duration-150 ...">  <!-- ... --></button>

在變體文件中瞭解更多關於使用變體的信息。