トランジションとアニメーション
CSSトランジションのイージングを制御するためのユーティリティ。
| クラス | スタイル |
|---|---|
ease-linear | transition-timing-function: linear; |
ease-in | transition-timing-function: var(--ease-in); /* cubic-bezier(0.4, 0, 1, 1) */ |
ease-out | transition-timing-function: var(--ease-out); /* cubic-bezier(0, 0, 0.2, 1) */ |
ease-in-out | transition-timing-function: var(--ease-in-out); /* cubic-bezier(0.4, 0, 0.2, 1) */ |
ease-initial | transition-timing-function: initial; |
ease-(<custom-property>) | transition-timing-function: var(<custom-property>); |
ease-[<value>] | transition-timing-function: <value>; |
`ease-in` や `ease-out` のようなユーティリティを使用して、要素のトランジションのイージングカーブを制御します。
各ボタンにホバーして、期待される動作を確認してください。
ease-in
ease-out
ease-in-out
<button class="duration-300 ease-in ...">Button A</button><button class="duration-300 ease-out ...">Button B</button><button class="duration-300 ease-in-out ...">Button C</button>次の ease-[<value>] 構文 を使用してtransition timing function完全にカスタム値に基づいて設定するには
<button class="ease-[cubic-bezier(0.95,0.05,0.795,0.035)] ..."> <!-- ... --></button>CSS変数には、次のものも使用できます ease-(<custom-property>) 構文
<button class="ease-(--my-ease) ..."> <!-- ... --></button>これは単なるショートハンドです ease-[var(<custom-property>)] `var()` 関数を自動的に追加する。
プレフィックスa `transition-timing-function` ユーティリティ `md:` のようなブレークポイントバリアントを付けて、ユーティリティを適用する範囲をmedium 以上の画面サイズに限定します
<button class="ease-out md:ease-in ..."> <!-- ... --></button>バリアントの使用方法の詳細については、バリアントのドキュメントを参照してください。
`--ease-*` テーマ変数を使用して、次のものをカスタマイズしますtransition timing function プロジェクト内のユーティリティ
@theme { --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); }これで、 ease-in-expo ユーティリティをマークアップで使用できます
<button class="ease-in-expo"> <!-- ... --></button>テーマのカスタマイズの詳細については、 テーマのドキュメントを参照してください。.