トランジションとアニメーション
どのCSSプロパティをトランジションさせるかを制御するユーティリティ。
| Class | Styles |
|---|---|
transition | transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */ |
transition-all | transition-property: all; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */ |
transition-colors | transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */ |
transition-opacity | transition-property: opacity; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */ |
transition-shadow | transition-property: box-shadow; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */ |
transition-transform | transition-property: transform, translate, scale, rotate; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */ |
transition-none | transition-property: none; |
transition-(<custom-property>) | transition-property: var(<custom-property>); transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */ |
transition-[<value>] | transition-property: <value>; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */ |
transitionやtransition-colorsのようなユーティリティを使用して、変更時にどのプロパティをトランジションさせるかを指定します。
ボタンにホバーして、期待される動作を確認してください。
<button class="bg-blue-500 transition delay-150 duration-300 ease-in-out hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 ..."> Save Changes</button>ユーザーがモーション削減を希望している状況では、motion-safeおよびmotion-reduceバリアントを使用して、アニメーションとトランジションを条件付きで適用できます。
<button class="transform transition hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:transform-none ..."> <!-- ... --></button>Use the transition-[<value>] syntax to set thetransition properties完全にカスタムの値に基づいてトランジションプロパティを設定するには
<button class="transition-[height] ..."> <!-- ... --></button>CSS変数には、以下も使用できます。 transition-(<custom-property>) syntax
<button class="transition-(--my-properties) ..."> <!-- ... --></button>This is just a shorthand for transition-[var(<custom-property>)] `var()`関数を自動的に追加します。
Prefixa transition-property utility with a breakpoint variant like md: to only apply the utility atmedium screen sizes and above
<button class="transition-none md:transition-all ..."> <!-- ... --></button>バリアントの使用方法の詳細については、バリアントのドキュメントを参照してください。