遷移タイミング機能

Tailwind CSS version
v1.2.0+

CSS遷移の緩和を制御するためのユーティリティ。

Class reference

Class
Properties
.ease-lineartransition-timing-function: linear;
.ease-intransition-timing-function: cubic-bezier(0.4, 0, 1, 1);
.ease-outtransition-timing-function: cubic-bezier(0, 0, 0.2, 1);
.ease-in-outtransition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

使用方法

ease-{timing}ユーティリティを使用して、要素のイージングカーブを制御します。

<button class="transition ease-in duration-700 ...">Hover me</button>
<button class="transition ease-out duration-700 ...">Hover me</button>
<button class="transition ease-in-out duration-700 ...">Hover me</button>

Responsive

特定のブレークポイントで要素のtransition-timing-functionを制御するには、既存のtransition-timing-functionユーティリティに{screen}:プレフィックスを追加します。 たとえば、md:ease-in-outを使用して、中程度の画面サイズ以上でのみease-in-outユーティリティを適用します。

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

Customizing

Timing values

デフォルトでは、Tailwindは4つの汎用遷移タイミング関数ユーティリティを提供します。 Tailwindテーマ設定のtransitionTimingFunctionセクションをカスタマイズして、これらを変更、追加、または削除します。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        transitionTimingFunction: {
+         'in-expo': 'cubic-bezier(0.95, 0.05, 0.795, 0.035)',
+         'out-expo': 'cubic-bezier(0.19, 1, 0.22, 1)',
        }
      }
    }
  }

デフォルトテーマのカスタマイズについてはテーマのカスタマイズをご覧ください。

レスポンシブと疑似バリアントクラス

デフォルトでonly responsive バリアントはtransition-timing-function utilitiesのために作られます。

あなたはどのバリアントがtransition-timing-function utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのtransitionTimingFunctionプロパティを修正することによってコントロールできます。

例として、この設定は also hover and focus バリアントを作ります。

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     transitionTimingFunction: ['responsive'],
+     transitionTimingFunction: ['responsive', 'hover', 'focus'],
    }
  }

無効にする

もしtransition-timing-function utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのtransitionTimingFunction propertyfalseに設定することで完全に無効にすることができます。

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

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!