アニメーションクラス（animate-*）

『Tailwind CSS』の Animation クラスは、animate-spin・animate-bounce・animate-pulse などのクラスを要素に付けるだけで、CSS キーフレームアニメーションを適用できるユーティリティクラス群です。ローディングスピナーや注意を促す点滅など、よく使われるアニメーションパターンをすぐに利用できます。

animate クラス一覧

animate-* クラスは、定義済みの CSS キーフレームアニメーションを要素に適用します。クラスを付けるだけでアニメーションが始まり、無限ループし続けます。

クラス	CSS の値	説明
`animate-none`	`animation: none`	アニメーションを無効にします。
`animate-spin`	`animation: spin 1s linear infinite`	要素を 1 秒周期で右回転し続けます。ローディングアイコンに適しています。
`animate-ping`	`animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite`	要素が広がりながらフェードアウトするアニメーションを繰り返します。通知バッジなどに適しています。
`animate-pulse`	`animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite`	要素の不透明度が 100% と 50% の間で繰り返し変化します。スケルトンローディングに適しています。
`animate-bounce`	`animation: bounce 1s infinite`	要素が上下にバウンドし続けます。スクロールを促す矢印アイコンなどに適しています。

animate-spin の使い方

animate-spin は要素を一定速度で回転し続けるアニメーションです。ローディング中を示すスピナーアイコンの実装に最もよく使われます。

<!-- animate-spin: 要素を 1 秒周期で右回転させます -->
<!-- h-8 w-8: 幅・高さを 2rem (32px) にします -->
<!-- border-4: 枠線を 4px にします -->
<!-- border-t-transparent: 上辺の枠線を透明にしてリング形状を作ります -->
<div class="animate-spin h-8 w-8 rounded-full
            border-4 border-blue-500 border-t-transparent">
</div>

<!-- ローディング中のテキストとスピナーを横並びにする例です -->
<div class="flex items-center gap-2 text-gray-600">
  <div class="animate-spin h-5 w-5 rounded-full
              border-2 border-gray-400 border-t-transparent"></div>
  <span>読み込み中...</span>
</div>

<!-- ボタン内にスピナーを埋め込む例です -->
<button class="flex items-center gap-2
               bg-blue-500 text-white font-semibold
               py-2 px-4 rounded opacity-75 cursor-not-allowed"
        disabled>
  <svg class="animate-spin h-4 w-4 text-white"
       xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
    <!-- 円の背景部分です -->
    <circle class="opacity-25" cx="12" cy="12" r="10"
            stroke="currentColor" stroke-width="4"></circle>
    <!-- 回転する弧の部分です -->
    <path class="opacity-75" fill="currentColor"
          d="M4 12a8 8 0 018-8v8H4z"></path>
  </svg>
  送信中...
</button>

animate-bounce の使い方

animate-bounce は要素が上下にバウンドし続けるアニメーションです。スクロールを促す下矢印アイコンや、ユーザーの注意を引きたいボタンなどに使われます。

<!-- animate-bounce: 要素を上下にバウンドさせます -->
<!-- 下向き矢印のアイコンをバウンドさせてスクロールを促す例です -->
<div class="flex justify-center mt-8">
  <svg class="animate-bounce h-8 w-8 text-gray-500"
       xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
       stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M19 9l-7 7-7-7" />
  </svg>
</div>

<!-- カートに追加ボタンをバウンドさせる例です -->
<!-- hover:animate-bounce: ホバー時だけバウンドさせます -->
<button class="hover:animate-bounce
               bg-green-500 hover:bg-green-600 text-white
               font-bold py-2 px-6 rounded">
  カートに追加
</button>

<!-- 複数の要素にバウンドを適用する例です -->
<div class="flex gap-1 justify-center">
  <!-- delay-* で開始タイミングをずらして波打つように見せます -->
  <span class="animate-bounce delay-0
               block h-3 w-3 bg-blue-400 rounded-full"></span>
  <span class="animate-bounce delay-75
               block h-3 w-3 bg-blue-500 rounded-full"></span>
  <span class="animate-bounce delay-150
               block h-3 w-3 bg-blue-600 rounded-full"></span>
</div>

animate-pulse の使い方

animate-pulse は要素の不透明度が繰り返し変化するアニメーションです。コンテンツが読み込まれるまでの間に表示するスケルトン（骨格）UI の実装に広く使われます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>スケルトンローディング サンプル</title>
  <!-- Tailwind CSS を CDN で読み込みます -->
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8">

  <!-- animate-pulse でスケルトンカードを表示する例です -->
  <div class="bg-white rounded-lg shadow p-4 max-w-sm">

    <!-- 画像プレースホルダーです -->
    <div class="animate-pulse bg-gray-300 rounded h-40 w-full"></div>

    <div class="mt-4 space-y-2">
      <!-- タイトルプレースホルダーです -->
      <div class="animate-pulse bg-gray-300 rounded h-4 w-3/4"></div>
      <!-- 本文プレースホルダーです -->
      <div class="animate-pulse bg-gray-300 rounded h-3 w-full"></div>
      <div class="animate-pulse bg-gray-300 rounded h-3 w-5/6"></div>
    </div>

    <div class="mt-4 flex items-center gap-3">
      <!-- アバタープレースホルダーです -->
      <div class="animate-pulse bg-gray-300 rounded-full h-10 w-10"></div>
      <div class="space-y-1 flex-1">
        <!-- ユーザー名プレースホルダーです -->
        <div class="animate-pulse bg-gray-300 rounded h-3 w-1/2"></div>
        <div class="animate-pulse bg-gray-300 rounded h-3 w-1/3"></div>
      </div>
    </div>

  </div>

</body>
</html>

animate-ping の使い方

animate-ping は要素が外側に広がりながらフェードアウトするアニメーションを繰り返します。通知バッジやオンライン状態の表示など、注目を集めたい場所に使われます。

<!-- relative と absolute を組み合わせて ping エフェクトを重ねる例です -->
<div class="relative inline-flex">

  <!-- ベルアイコンボタンです -->
  <button class="bg-gray-200 hover:bg-gray-300 rounded-full p-2">
    <svg class="h-6 w-6 text-gray-700"
         xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
         stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M15 17H20L18.595 15.595A1.5 1.5 0 0118 14.5V11a6 6 0 10-12 0v3.5a1.5 1.5 0 01-.595 1.005L4 17h5m6 0a3 3 0 01-6 0" />
    </svg>
  </button>

  <!-- 通知バッジの ping エフェクトです -->
  <!-- span を 2 枚重ねて ping アニメーションを表現します -->
  <span class="absolute top-0 right-0 flex h-3 w-3">
    <!-- animate-ping: 外側に広がりながらフェードアウトします -->
    <span class="animate-ping absolute inline-flex h-full w-full
                 rounded-full bg-red-400 opacity-75"></span>
    <!-- 常に表示される実際のドットです -->
    <span class="relative inline-flex h-3 w-3
                 rounded-full bg-red-500"></span>
  </span>

</div>

<!-- オンライン状態の表示に使う例です -->
<div class="flex items-center gap-2">
  <span class="relative flex h-3 w-3">
    <span class="animate-ping absolute inline-flex h-full w-full
                 rounded-full bg-green-400 opacity-75"></span>
    <span class="relative inline-flex h-3 w-3
                 rounded-full bg-green-500"></span>
  </span>
  <span class="text-sm text-gray-600">オンライン</span>
</div>

アニメーションの停止と条件付き制御

特定の条件下ではアニメーションを止めたい場合があります。animate-none で無効化したり、motion-reduce: バリアントでアニメーションの苦手なユーザーに配慮することができます。

<!-- animate-none: アニメーションを完全に止めます -->
<div class="animate-none h-8 w-8 rounded-full
            border-4 border-blue-500 border-t-transparent">
</div>

<!-- motion-reduce: OS の「アニメーション低減」設定を尊重する例です -->
<!-- 通常は spin しますが、OS 設定で動きを減らしている場合は止まります -->
<div class="animate-spin motion-reduce:animate-none
            h-8 w-8 rounded-full
            border-4 border-blue-500 border-t-transparent">
</div>

<!-- motion-reduce: を pulse にも適用する例です -->
<div class="animate-pulse motion-reduce:animate-none
            bg-gray-300 rounded h-4 w-3/4">
</div>

カスタムアニメーションの定義（任意の値）

Tailwind CSS の定義済みアニメーション以外を使いたい場合は、tailwind.config.js でキーフレームとアニメーションを追加して拡張できます。

<!-- tailwind.config.js でのカスタムアニメーション定義例です -->
<!-- ※ このブロックは HTML ではなく JavaScript の設定ファイルです -->

<!--
module.exports = {
  theme: {
    extend: {
      keyframes: {
        // wiggle: 左右に揺れるアニメーションを定義します
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%':       { transform: 'rotate(3deg)' },
        },
        // fadeIn: フェードインするアニメーションを定義します
        fadeIn: {
          '0%':   { opacity: '0' },
          '100%': { opacity: '1' },
        },
      },
      animation: {
        // クラス名 'animate-wiggle' として利用できるようにします
        wiggle:  'wiggle 0.5s ease-in-out infinite',
        // クラス名 'animate-fade-in' として利用できるようにします
        'fade-in': 'fadeIn 0.6s ease-out both',
      },
    },
  },
}
-->

<!-- 設定後、HTML から通常のクラスとして使えます -->
<button class="animate-wiggle bg-yellow-400 font-bold py-2 px-4 rounded">
  揺れるボタン
</button>

<p class="animate-fade-in text-gray-700 text-lg">
  フェードインするテキスト
</p>

概要

Animation クラスは『Tailwind CSS』が提供する CSS キーフレームアニメーションのユーティリティクラス群です。animate-spin（回転）・animate-bounce（バウンド）・animate-pulse（点滅）・animate-ping（波紋）の 4 種類が標準で用意されており、クラスを付けるだけで即座に使えます。

ローディングスピナーには animate-spin、スケルトン UI には animate-pulse、通知バッジには animate-ping、スクロール誘導には animate-bounce と、それぞれ用途に合わせて使い分けるのが基本です。アクセシビリティへの配慮として motion-reduce:animate-none を組み合わせ、OS の「アニメーション低減」設定を尊重することも推奨されます。

関連ページ: Transition / Duration / Easing

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

Tailwind CSS辞典