アニメーション

Tailwind CSS version
v1.6.0+

CSSアニメーションで要素をアニメーション化するためのユーティリティ

Class reference

ClassProperties
.animate-noneanimation: none;
.animate-spinanimation: spin 1s linear infinite; @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.animate-pinganimation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; @keyframes ping { 0% { transform: scale(1); opacity: 1; } 75%, 100% { transform: scale(2); opacity: 0; } }
.animate-pulseanimation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.animate-bounceanimation: bounce 1s infinite; @keyframes bounce { 0%, 100% { transform: translateY(-25%); animationTimingFunction: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0); animationTimingFunction: cubic-bezier(0, 0, 0.2, 1); } }

Spin

animate-spinユーティリティを追加して、インジケーターの読み込みなどの要素に線形スピンアニメーションを追加します。

<button type="button" class="bg-indigo-600 ..." disabled>
  <svg class="animate-spin h-5 w-5 mr-3 ..." viewBox="0 0 24 24">
    <!-- ... -->
  </svg>
  Processing
</button>

Ping

animate-pingユーティリティを追加して、要素を拡大縮小し、レーダーpingや水の波紋のようにフェードさせます。これは通知バッジなどに役立ちます。

<span class="flex h-3 w-3">
  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-pink-400 opacity-75"></span>
  <span class="relative inline-flex rounded-full h-3 w-3 bg-pink-500"></span>
</span>

Pulse

animate-pulseユーティリティを追加して、要素を穏やかにフェードインおよびフェードアウトさせます。これは、スケルトンローダーなどに役立ちます。

<div class="border border-gray-300 shadow rounded-md p-4 max-w-sm w-full mx-auto">
  <div class="animate-pulse flex space-x-4">
    <div class="rounded-full bg-gray-400 h-12 w-12"></div>
    <div class="flex-1 space-y-4 py-1">
      <div class="h-4 bg-gray-400 rounded w-3/4"></div>
      <div class="space-y-2">
        <div class="h-4 bg-gray-400 rounded"></div>
        <div class="h-4 bg-gray-400 rounded w-5/6"></div>
      </div>
    </div>
  </div>
</div>

Bounce

animate-bounceユーティリティを追加して、要素を上下にバウンスさせます。これは、スクロールダウンインジケーターなどに役立ちます。

<svg class="animate-bounce w-6 h-6 text-gray-900" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
  <path d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
</svg>

モーションを減らしたい場合

motion-safeおよびmotion-reduceバリアントを使用して、条件付きでアニメーションとトランジションを適用できます。

<button type="button" class="bg-indigo-600 ..." disabled>
  <svg class="motion-safe:animate-spin h-5 w-5 mr-3 ..." viewBox="0 0 24 24">
    <!-- ... -->
  </svg>
  Processing
</button>

これらバリアントはデフォルトでは利用可能ではありません。 しかしtailwind.config.jsfileのvariantsセクションの設定を変更することにより利用可能になります。

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    animation: ['responsive', 'motion-safe', 'motion-reduce']
  }
}

より詳しくはvariants documentationをご覧ください。

レスポンシブ

特定のブレークポイントでアニメーションを変更または無効にするには、既存のアニメーションユーティリティに {screen}:プレフィックスを追加します。 たとえば、md:animate-noneを使用して、中程度の画面サイズ以上でのみanimate-noneユーティリティを適用します。

<div class="animate-spin md:animate-none ...">
  <!-- ... -->
</div>

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

カスタマイズ

アニメーションはその性質上、プロジェクト固有のものになる傾向があります。デフォルトで含まれているアニメーションは、私達が熟慮して最も役立つものを選択しました。 あなたのニーズに合わせてアニメーションをカスタマイズすることをお勧めします。

デフォルトでは、Tailwindは、4つの異なるアニメーション例のユーティリティと、animate-noneユーティリティを提供します。 テーマ構成のアニメーションセクションをカスタマイズして、これらを変更、追加、または削除できます。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        animation: {
+         'spin-slow': 'spin 3s linear infinite',
        }
      }
    }
  }

新しいアニメーション @keyframesを追加するには、テーマ構成のkeyframesセクションを使用します。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        keyframes: {
+         wiggle: {
+           '0%, 100%': { transform: 'rotate(-3deg)' },
+           '50%': { transform: 'rotate(3deg)' },
+         }
        }
      }
    }
  }

次に、テーマ構成のanimationセクションで、これらのkeyframesを名前で参照できます。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        animation: {
+         wiggle: 'wiggle 1s ease-in-out infinite',
        }
      }
    }
  }

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

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

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

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

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

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

機能を使用しない場合

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

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

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

Tailwind UI is now in early access!