transition-delay

例

基本的な例

delay-150 や 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-[<value>] 構文 を使用して、トランジション遅延を完全にカスタム値に基づいて設定します。

<button class="delay-[1s,250ms] ...">
  <!-- ... -->
</button>

CSS変数には、次のものも使用できます。 delay-(<custom-property>) 構文

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

これは、次の省略形です。 delay-[var(<custom-property>)] これは、var() 関数を自動的に追加するものです。

レスポンシブデザイン

プレフィックスa transition-delay ユーティリティ に md: のようなブレークポイントバリアントをプレフィックスとして付けると、ユーティリティをmedium 以上の画面サイズでのみ適用できます。

<button class="delay-150 md:delay-300 ...">
  <!-- ... -->
</button>

バリアントのドキュメントで、バリアントの使用方法の詳細をご覧ください。