【Tailwind和訳】TRANSITIONS & ANIMATION/Transition Property

この記事について

この記事は、TRANSITIONS AND ANIMATION/Transition Propertyの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

---

Transition Property

CSS プロパティの遷移を制御するユーティリティ。

クラス	プロパティ
transition-none	transition-property: none;
transition-all	・transition-property: all; ・transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); ・transition-duration: 150ms;
transition	・transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; ・transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); ・transition-duration: 150ms;
transition-colors	・transition-property: background-color, border-color, color, fill, stroke; ・transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); ・transition-duration: 150ms;
transition-opacity	・transition-property: opacity; ・transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); ・transition-duration: 150ms;
transition-shadow	・transition-property: box-shadow; ・transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) ・transition-duration: 150ms;
transition-transform	・transition-property: transform; ・transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); ・transition-duration: 150ms;

使い方

transition-{properties}ユーティリティーを使って、どのプロパティが変化したときに遷移するかを指定します。

（ホバー前）

（ホバー後）

<button
  class="transition duration-500 ease-in-out bg-blue-600 hover:bg-red-600 transform hover:-translate-y-1 hover:scale-110 ..."
>
  Hover me
</button>

減速されたアニメーションを好む

motion-safe や motion-reduce を使って、条件付きでアニメーションやトランジションを適用することができます。

<button
  class="transition transform hover:-translate-y-1 motion-reduce:transition-none motion-reduce:transform-none ..."
>
  Hover me
</button>

これらのバリアントはデフォルトでは有効ではありませんが、tailwind.config.js ファイルのvariantsセクションで有効にすることができます。

tailwind.config.js

module.exports = {
  // ...
  variants: {
    transitionProperty: ["responsive", "motion-safe", "motion-reduce"],
  },
}

詳しくは、Variant のドキュメントをご覧ください。

レスポンシブ

特定のブレークポイントで要素のどのプロパティがトランジションするかを変更するには、既存の transition-property ユーティリティに {screen}: というプレフィックスを追加します。例えば、md:transition-colors を使えば、中程度のスクリーンサイズ以上でのみ transition-colors ユーティリティを適用できます。

Tailwind のレスポンシブデザイン機能についての詳細は、レスポンシブデザインのドキュメントをご覧ください。

カスタマイズ

プロパティ値

デフォルトでは、Tailwind は 7 つの一般的なプロパティの組み合わせに対して、トランジション・プロパティ・ユーティリティを提供しています。これらを変更、追加、削除するには、Tailwind のテーマ設定の transitionProperty セクションをカスタマイズします。

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      transitionProperty: {
+       height: "height",
+       spacing: "margin, padding",
      },
    },
  },
}

デフォルトのテーマをカスタマイズする方法については、テーマのカスタマイズに関するドキュメントを参照してください。

バリアント

デフォルトでは、transition-property ユーティリティには responsive バリアントのみが生成されます。

tailwind.config.js ファイルの f セクションの transitionProperty プロパティを変更することで、transition-property ユーティリティのために生成されるバリアントをコントロールすることができます。

例えば、このコンフィグはホバーとフォーカスのバリアントも生成します。

tailwind.config.js

module.exports = {
  variants: {
    extend: {
      // ...
+     transitionProperty: ["hover", "focus"],
    },
  },
}

無効化

プロジェクトで transition-property ユーティリティを使用する予定がない場合は、設定ファイルの corePlugins セクションで transitionProperty プロパティを false に設定することで、完全に無効にすることができます。

// tailwind.config.js
module.exports = {
  corePlugins: {
    // ...
+   transitionProperty: false,
  },
}