transition-duration

例

基本的な例

`duration-150`や`duration-700`のようなユーティリティを使用して、要素のトランジションdurationをミリ秒単位で設定します。

<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-[<値>] 構文 を設定するにはトランジション duration完全にカスタムの値に基づいて

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

CSS変数には、以下も使用できます。 duration-(<カスタムプロパティ>) 構文

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

これは単なる短縮形です duration-[var(<カスタムプロパティ>)] それは自動的にvar()関数を追加します。

レスポンシブデザイン

プレフィックスa transition-duration ユーティリティ md:のようなブレークポイントバリアントを使用すると、ユーティリティを適用するのはmedium 画面サイズ以上

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

バリアントの使用に関する詳細は、variantsドキュメントを参照してください。