【Tailwind和訳】TRANSITIONS & ANIMATION/Animation

この記事について

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

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

---

Animation

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

クラス	プロパティ
animate-none	animation: none;
animate-spin	animation: spin 1s linear infinite; @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
animate-ping	animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
animate-pulse	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
animate-bounce	animation: bounce 1s infinite; @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } }

Spin

animate-spin・ユーティリティーを追加して、ローディング・インジケータなどの要素に直線的なスピン・アニメーションを追加します。

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

Ping

レーダーのピン音や水の波紋のように要素をスケールさせたり、フェードさせたりするためのanimate-pingユーティリティを追加しました。

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

Pulse

animate-pulse ユーティリティを追加すると、要素が緩やかにフェードイン/アウトするようになります。

<div class="border border-blue-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-blue-400 h-12 w-12"></div>
    <div class="flex-1 space-y-4 py-1">
      <div class="h-4 bg-blue-400 rounded w-3/4"></div>
      <div class="space-y-2">
        <div class="h-4 bg-blue-400 rounded"></div>
        <div class="h-4 bg-blue-400 rounded w-5/6"></div>
      </div>
    </div>
  </div>
</div>

Bounce

animate-bounce ユーティリティを追加し、要素を上下にバウンスさせます。

<svg class="animate-bounce w-6 h-6 ...">
  <!-- ... -->
</svg>

Prefers-reduced-motion

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.js ファイルのvariantsセクションで有効にすることができます。

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

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

レスポンシブ

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

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

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

Customizing

アニメーションは、その性質上、プロジェクトごとに大きく異なる傾向があります。私たちがデフォルトで提供しているアニメーションは、参考例としてお考えいただくのがベストであり、お客様のニーズに合わせてアニメーションをカスタマイズすることをお勧めします。

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

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セクションで名前をつけて参照できます。

tailwind.config.js

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

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

バリアント

デフォルトでは、レスポンシブバリアントのみがアニメーションユーティリティのために生成されます。

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

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

tailwind.config.js

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

無効化

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

tailwind.config.js

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