EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語

Tailwind CSS トランジションとアニメーション：transition プロパティと animate プリセット

トランジションプロパティ（transition-*）

トランジションクラスは、要素の状態変化時にスムーズなアニメーション効果を制御します。

クラス CSS 値 説明
transition transition-property: color, background-color, border-color, ... 一般的なプロパティのトランジション
transition-all transition-property: all すべてのプロパティのトランジション
transition-colors transition-property: color, background-color, border-color, ... カラーのみのトランジション
transition-opacity transition-property: opacity 不透明度のみのトランジション
transition-shadow transition-property: box-shadow シャドウのみのトランジション
transition-transform transition-property: transform 変形のみのトランジション
transition-none transition-property: none トランジションなし

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>トランジションプロパティデモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- transition-colors カラートランジション -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">transition-colors カラートランジション</h3>
      <div class="flex gap-4">
        <button class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-700 transition-colors duration-300">
          カラートランジション
        </button>
        <button class="px-6 py-3 bg-green-500 text-white rounded-lg hover:bg-green-700 hover:text-yellow-200 transition-colors duration-300">
          背景＋テキストトランジション
        </button>
        <button class="px-6 py-3 border-2 border-purple-500 text-purple-500 rounded-lg hover:border-purple-700 hover:text-purple-700 transition-colors duration-300">
          ボーダートランジション
        </button>
      </div>
    </div>

    <!-- transition-opacity 不透明度トランジション -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">transition-opacity 不透明度トランジション</h3>
      <div class="flex gap-4">
        <div class="w-24 h-24 bg-blue-500 rounded-lg hover:opacity-50 transition-opacity duration-300 flex items-center justify-center text-white text-xs">
          ホバーで半透明
        </div>
        <div class="w-24 h-24 bg-green-500 rounded-lg opacity-50 hover:opacity-100 transition-opacity duration-300 flex items-center justify-center text-white text-xs">
          ホバーで完全不透明
        </div>
        <div class="w-24 h-24 bg-purple-500 rounded-lg hover:opacity-0 transition-opacity duration-500 flex items-center justify-center text-white text-xs">
          ホバーでフェードアウト
        </div>
      </div>
    </div>

    <!-- transition-shadow シャドウトランジション -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">transition-shadow シャドウトランジション</h3>
      <div class="flex gap-4">
        <div class="w-32 h-24 bg-white border rounded-lg hover:shadow-lg transition-shadow duration-300 flex items-center justify-center text-sm">
          小さいシャドウ
        </div>
        <div class="w-32 h-24 bg-white border rounded-lg hover:shadow-xl transition-shadow duration-300 flex items-center justify-center text-sm">
          大きいシャドウ
        </div>
        <div class="w-32 h-24 bg-white border rounded-lg hover:shadow-2xl hover:shadow-blue-500/50 transition-shadow duration-300 flex items-center justify-center text-sm">
          カラーシャドウ
        </div>
      </div>
    </div>

    <!-- transition-transform 変形トランジション -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">transition-transform 変形トランジション</h3>
      <div class="flex gap-4">
        <div class="w-24 h-24 bg-orange-500 rounded-lg hover:scale-110 transition-transform duration-300 flex items-center justify-center text-white text-xs cursor-pointer">
          拡大
        </div>
        <div class="w-24 h-24 bg-red-500 rounded-lg hover:rotate-12 transition-transform duration-300 flex items-center justify-center text-white text-xs cursor-pointer">
          回転
        </div>
        <div class="w-24 h-24 bg-teal-500 rounded-lg hover:-translate-y-2 transition-transform duration-300 flex items-center justify-center text-white text-xs cursor-pointer">
          上に移動
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

従来のCSSとTailwindの比較 従来の方法では transition: color 0.3s ease, background-color 0.3s ease のようなプロパティを記述する必要がありますが、Tailwindでは transition-colors duration-300 のようなクラス名で直接宣言できます。

💡 ポイント： transition クラスはデフォルトで一般的なプロパティ（color、background-color、border-color、opacity、box-shadow、transform）をトランジションの対象にします。

トランジションの継続時間（duration-*）

duration-* クラスは、トランジションアニメーションの継続時間を制御します。

クラス CSS 値 説明
duration-75 transition-duration: 75ms 極めて速い
duration-100 transition-duration: 100ms 非常に速い
duration-150 transition-duration: 150ms 速い
duration-200 transition-duration: 200ms やや速い
duration-300 transition-duration: 300ms 標準（デフォルト）
duration-500 transition-duration: 500ms やや遅い
duration-700 transition-duration: 700ms 遅い
duration-1000 transition-duration: 1000ms 非常に遅い

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>トランジション継続時間デモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-6">異なるトランジション継続時間の比較</h3>
      <div class="space-y-4">
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">duration-75</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-blue-500 rounded-lg hover:w-full transition-all duration-75"></div>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">duration-150</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-green-500 rounded-lg hover:w-full transition-all duration-150"></div>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">duration-300</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-yellow-500 rounded-lg hover:w-full transition-all duration-300"></div>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">duration-500</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-orange-500 rounded-lg hover:w-full transition-all duration-500"></div>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">duration-1000</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-red-500 rounded-lg hover:w-full transition-all duration-1000"></div>
          </div>
        </div>
      </div>
      <p class="text-sm text-gray-500 mt-4">カラーブロックにホバーして、異なるトランジション継続時間を確認してください</p>
    </div>
  </div>
</body>
</html>
▶ 試してみよう
💡 ポイント： インタラクティブ要素（ボタン、リンク）には通常 duration-150 や duration-200 を使用し、大きなアニメーションには duration-300 や duration-500 を使用します。

イージング関数（ease-*）

ease-* クラスは、トランジションアニメーションの加速カーブを制御します。

クラス CSS 値 説明
ease-linear transition-timing-function: linear 一定速度
ease-in transition-timing-function: cubic-bezier(0.4, 0, 1, 1) ゆっくり始まる
ease-out transition-timing-function: cubic-bezier(0, 0, 0.2, 1) ゆっくり終わる
ease-in-out transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) ゆっくり始まってゆっくり終わる

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>イージング関数デモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-6">異なるイージング関数の比較</h3>
      <div class="space-y-4">
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">ease-linear</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-blue-500 rounded-lg hover:w-full transition-all duration-1000 ease-linear"></div>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">ease-in</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-green-500 rounded-lg hover:w-full transition-all duration-1000 ease-in"></div>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">ease-out</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-yellow-500 rounded-lg hover:w-full transition-all duration-1000 ease-out"></div>
          </div>
        </div>
        <div class="flex items-center gap-4">
          <span class="w-24 text-sm text-gray-600">ease-in-out</span>
          <div class="flex-1 h-12 bg-gray-100 rounded-lg overflow-hidden">
            <div class="w-12 h-full bg-purple-500 rounded-lg hover:w-full transition-all duration-1000 ease-in-out"></div>
          </div>
        </div>
      </div>
      <p class="text-sm text-gray-500 mt-4">カラーブロックにホバーして、異なるイージング効果を確認してください</p>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

従来のCSSとTailwindの比較 従来の方法では transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) を記述する必要がありますが、Tailwindでは ease-in-out クラス名で直接宣言できます。

トランジション遅延（delay-*）

delay-* クラスは、トランジションアニメーションが開始されるまでの遅延を制御します。

クラス CSS 値 説明
delay-0 transition-delay: 0ms 遅延なし
delay-75 transition-delay: 75ms 75ms 遅延
delay-100 transition-delay: 100ms 100ms 遅延
delay-150 transition-delay: 150ms 150ms 遅延
delay-300 transition-delay: 300ms 300ms 遅延
delay-500 transition-delay: 500ms 500ms 遅延
delay-700 transition-delay: 700ms 700ms 遅延
delay-1000 transition-delay: 1000ms 1000ms 遅延

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>トランジション遅延デモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-6">段階的アニメーション効果（delayを使用）</h3>
      <div class="flex gap-4 justify-center">
        <div class="w-16 h-16 bg-blue-500 rounded-lg hover:scale-110 transition-transform duration-300 delay-0"></div>
        <div class="w-16 h-16 bg-green-500 rounded-lg hover:scale-110 transition-transform duration-300 delay-75"></div>
        <div class="w-16 h-16 bg-yellow-500 rounded-lg hover:scale-110 transition-transform duration-300 delay-150"></div>
        <div class="w-16 h-16 bg-orange-500 rounded-lg hover:scale-110 transition-transform duration-300 delay-300"></div>
        <div class="w-16 h-16 bg-red-500 rounded-lg hover:scale-110 transition-transform duration-300 delay-500"></div>
      </div>
      <p class="text-sm text-gray-500 mt-4 text-center">ホバーして段階的アニメーション効果を確認してください</p>
    </div>

    <!-- 段階的登場アニメーション -->
    <div class="bg-white rounded-lg shadow p-6 mt-6">
      <h3 class="font-semibold mb-6">段階的登場アニメーション</h3>
      <div class="space-y-3">
        <div class="p-4 bg-blue-50 rounded-lg opacity-0 translate-y-4 animate-[fadeInUp_0.5s_ease-out_0s_forwards]">
          アイテム 1（0ms 遅延）
        </div>
        <div class="p-4 bg-green-50 rounded-lg opacity-0 translate-y-4 animate-[fadeInUp_0.5s_ease-out_0.1s_forwards]">
          アイテム 2（100ms 遅延）
        </div>
        <div class="p-4 bg-yellow-50 rounded-lg opacity-0 translate-y-4 animate-[fadeInUp_0.5s_ease-out_0.2s_forwards]">
          アイテム 3（200ms 遅延）
        </div>
        <div class="p-4 bg-orange-50 rounded-lg opacity-0 translate-y-4 animate-[fadeInUp_0.5s_ease-out_0.3s_forwards]">
          アイテム 4（300ms 遅延）
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう
💡 ポイント： 異なる遅延値の delay-* を使用して段階的アニメーション効果を作成し、複数の要素が順番に現れるようにできます。

プリセットアニメーション（animate-*）

Tailwindは4つのプリセットアニメーションクラスを提供しています。

クラス CSS 値 説明
animate-spin 回転アニメーション ローディングアイコンに適しています
animate-ping ピングアニメーション 通知パルスに適しています
animate-pulse パルスアニメーション スケルトンスクリーンに適しています
animate-bounce バウンスアニメーション 矢印インジケーターに適しています

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>プリセットアニメーションデモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- animate-spin 回転 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">animate-spin 回転アニメーション</h3>
      <div class="flex gap-8 items-center">
        <div class="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
        <div class="w-12 h-12 border-4 border-green-500 border-t-transparent border-r-transparent rounded-full animate-spin"></div>
        <svg class="w-12 h-12 text-purple-500 animate-spin" 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-8V0C5.373 0 0 5.373 0 12h4z"></path>
        </svg>
      </div>
    </div>

    <!-- animate-ping ピング -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">animate-ping ピングアニメーション</h3>
      <div class="flex gap-8 items-center">
        <div class="relative">
          <div class="w-4 h-4 bg-blue-500 rounded-full"></div>
          <div class="absolute inset-0 w-4 h-4 bg-blue-500 rounded-full animate-ping"></div>
        </div>
        <div class="relative">
          <div class="w-8 h-8 bg-green-500 rounded-full"></div>
          <div class="absolute inset-0 w-8 h-8 bg-green-500 rounded-full animate-ping opacity-75"></div>
        </div>
        <button class="relative px-6 py-3 bg-red-500 text-white rounded-lg">
          通知
          <span class="absolute -top-1 -right-1 w-3 h-3 bg-yellow-400 rounded-full animate-ping"></span>
          <span class="absolute -top-1 -right-1 w-3 h-3 bg-yellow-400 rounded-full"></span>
        </button>
      </div>
    </div>

    <!-- animate-pulse パルス -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">animate-pulse パルスアニメーション</h3>
      <div class="flex gap-8 items-center">
        <div class="w-16 h-16 bg-blue-200 rounded-lg animate-pulse"></div>
        <div class="w-16 h-16 bg-green-200 rounded-lg animate-pulse"></div>
        <div class="w-16 h-16 bg-purple-200 rounded-lg animate-pulse"></div>
      </div>
      <!-- スケルトンスクリーン例 -->
      <div class="mt-6 p-4 bg-gray-50 rounded-lg">
        <div class="flex items-center gap-4">
          <div class="w-12 h-12 bg-gray-200 rounded-full animate-pulse"></div>
          <div class="flex-1 space-y-2">
            <div class="h-4 bg-gray-200 rounded animate-pulse w-3/4"></div>
            <div class="h-3 bg-gray-200 rounded animate-pulse w-1/2"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- animate-bounce バウンス -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">animate-bounce バウンスアニメーション</h3>
      <div class="flex gap-8 items-center justify-center">
        <svg class="w-8 h-8 text-blue-500 animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
        </svg>
        <div class="w-8 h-8 bg-green-500 rounded-full animate-bounce"></div>
        <div class="w-8 h-8 bg-orange-500 rounded-lg animate-bounce"></div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

従来のCSSとTailwindの比較 従来の方法では @keyframes と animation プロパティを記述する必要がありますが、Tailwindでは animate-spin や animate-pulse などのクラス名でプリセットアニメーションを直接適用できます。

💡 ポイント： animate-ping は通常、絶対配置と組み合わせてパルス通知効果を作成するために使用します。animate-pulse はスケルトンスクリーンのローディング効果に最適です。

カスタム Keyframes

Tailwind設定または @theme ディレクティブを使用してカスタムアニメーションを定義できます。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>カスタム Keyframes デモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style type="text/tailwindcss">
    @theme {
      --animate-fade-in: fadeIn 0.5s ease-out;
      --animate-fade-in-up: fadeInUp 0.5s ease-out;
      --animate-slide-in-left: slideInLeft 0.5s ease-out;
      --animate-scale-in: scaleIn 0.3s ease-out;
      --animate-shake: shake 0.5s ease-in-out;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes slideInLeft {
      from {
        opacity: 0;
        transform: translateX(-20px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes scaleIn {
      from {
        opacity: 0;
        transform: scale(0.9);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    @keyframes shake {
      0%, 100% { transform: translateX(0); }
      10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
      20%, 40%, 60%, 80% { transform: translateX(4px); }
    }
  </style>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- カスタムアニメーション -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">カスタムアニメーション</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="p-4 bg-blue-50 rounded-lg text-center animate-fade-in">
          <div class="text-2xl mb-2">fadeIn</div>
          <div class="text-sm text-gray-600">フェードイン</div>
        </div>
        <div class="p-4 bg-green-50 rounded-lg text-center animate-fade-in-up">
          <div class="text-2xl mb-2">fadeInUp</div>
          <div class="text-sm text-gray-600">上にスライドフェードイン</div>
        </div>
        <div class="p-4 bg-yellow-50 rounded-lg text-center animate-slide-in-left">
          <div class="text-2xl mb-2">slideInLeft</div>
          <div class="text-sm text-gray-600">左からスライドイン</div>
        </div>
        <div class="p-4 bg-purple-50 rounded-lg text-center animate-scale-in">
          <div class="text-2xl mb-2">scaleIn</div>
          <div class="text-sm text-gray-600">スケールイン</div>
        </div>
      </div>
    </div>

    <!-- shake アニメーション -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">shake アニメーション</h3>
      <div class="flex gap-4">
        <input type="text" placeholder="入力フィールド"
               class="flex-1 p-3 border border-red-300 rounded-lg animate-shake focus:outline-none focus:border-red-500">
        <button class="px-6 py-3 bg-red-500 text-white rounded-lg hover:bg-red-600">
          送信
        </button>
      </div>
      <p class="text-sm text-red-500 mt-2">shake アニメーションを使用して入力エラーを示します</p>
    </div>

    <!-- アニメーション制御 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">アニメーション制御</h3>
      <div class="flex gap-4 flex-wrap">
        <div class="w-16 h-16 bg-blue-500 rounded-lg animate-spin [animation-play-state:paused] hover:[animation-play-state:running] flex items-center justify-center text-white text-xs cursor-pointer">
          ホバーで再生
        </div>
        <div class="w-16 h-16 bg-green-500 rounded-lg animate-bounce [animation-iteration-count:3] flex items-center justify-center text-white text-xs">
          3回バウンス
        </div>
        <div class="w-16 h-16 bg-purple-500 rounded-lg animate-pulse [animation-direction:alternate] flex items-center justify-center text-white text-xs">
          交互方向
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

従来のCSSとTailwindの比較 従来の方法ではCSSファイルに @keyframes を定義し、animation プロパティを記述する必要がありますが、Tailwind v4の @theme ディレクティブを使うと、アニメーション変数を直接定義し、animate-* クラスで使用できます。

⚠️ 注意： Tailwind CDNモードでは、@theme ディレクティブは <style type="text/tailwindcss"> タグ内に配置する必要があります。

総合例

トランジションとアニメーションを組み合わせて、完全なインタラクティブ効果の例を作成します。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>トランジションとアニメーション総合例</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style type="text/tailwindcss">
    @theme {
      --animate-fade-in-up: fadeInUp 0.6s ease-out forwards;
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  </style>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- インタラクティブカード -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      <div class="bg-white rounded-xl shadow-lg overflow-hidden group cursor-pointer transition-all duration-300 hover:shadow-xl hover:-translate-y-2">
        <div class="relative h-48 overflow-hidden">
          <img src="https://picsum.photos/400/200?random=20" alt="カード"
               class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <div class="absolute bottom-4 left-4 text-white transform translate-y-4 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all duration-300">
            <h4 class="font-semibold">詳細を見る</h4>
          </div>
        </div>
        <div class="p-4">
          <h4 class="font-semibold text-gray-900 mb-2">ホバーエフェクトカード</h4>
          <p class="text-gray-600 text-sm">画像ズーム、オーバーレイ表示、テキストスライドイン</p>
        </div>
      </div>

      <div class="bg-white rounded-xl shadow-lg overflow-hidden group cursor-pointer transition-all duration-300 hover:shadow-xl hover:-translate-y-2">
        <div class="relative h-48 overflow-hidden">
          <img src="https://picsum.photos/400/200?random=21" alt="カード"
               class="w-full h-full object-cover transition-transform duration-500 group-hover:rotate-3">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <div class="absolute bottom-4 left-4 text-white transform translate-y-4 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all duration-300">
            <h4 class="font-semibold">詳細を見る</h4>
          </div>
        </div>
        <div class="p-4">
          <h4 class="font-semibold text-gray-900 mb-2">回転エフェクトカード</h4>
          <p class="text-gray-600 text-sm">画像回転、オーバーレイ表示、テキストスライドイン</p>
        </div>
      </div>

      <div class="bg-white rounded-xl shadow-lg overflow-hidden group cursor-pointer transition-all duration-300 hover:shadow-xl hover:-translate-y-2">
        <div class="relative h-48 overflow-hidden">
          <img src="https://picsum.photos/400/200?random=22" alt="カード"
               class="w-full h-full object-cover transition-all duration-500 group-hover:brightness-125">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <div class="absolute bottom-4 left-4 text-white transform translate-y-4 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all duration-300">
            <h4 class="font-semibold">詳細を見る</h4>
          </div>
        </div>
        <div class="p-4">
          <h4 class="font-semibold text-gray-900 mb-2">明るさエフェクトカード</h4>
          <p class="text-gray-600 text-sm">明るさ強調、オーバーレイ表示、テキストスライドイン</p>
        </div>
      </div>
    </div>

    <!-- ローディング状態 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">ローディング状態アニメーション</h3>
      <div class="flex gap-8 items-center">
        <div class="flex flex-col items-center gap-2">
          <div class="w-10 h-10 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
          <span class="text-sm text-gray-600">ローディング</span>
        </div>
        <div class="flex flex-col items-center gap-2">
          <div class="flex gap-1">
            <div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0s;"></div>
            <div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0.1s;"></div>
            <div class="w-3 h-3 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0.2s;"></div>
          </div>
          <span class="text-sm text-gray-600">バウンスローディング</span>
        </div>
        <div class="flex flex-col items-center gap-2">
          <div class="flex gap-1">
            <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse" style="animation-delay: 0s;"></div>
            <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse" style="animation-delay: 0.15s;"></div>
            <div class="w-3 h-3 bg-green-500 rounded-full animate-pulse" style="animation-delay: 0.3s;"></div>
          </div>
          <span class="text-sm text-gray-600">パルスローディング</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

❓ よくある質問

Q transition と transition-all の違いは何ですか？
A transition は一般的なプロパティ（カラー、背景、ボーダー、シャドウ、変形など）をトランジションしますが、transition-all はアニメーション可能なすべてのプロパティをトランジションします。パフォーマンスの観点から transition が推奨されます。
Q アニメーションを1回だけ再生するにはどうすればよいですか？
A [animation-iteration-count:1] を使用するか、@theme でアニメーションを定義する際に animation-fill-mode: forwards を設定して最終状態を保持してください。
Q トランジションアニメーションが動作しない場合はどうすればよいですか？
A transition クラスを追加しているか確認し、プロパティがトランジション可能であること（display は不可）を確認し、duration が0でないことを確認してください。
Q 段階的アニメーションを作成するにはどうすればよいですか？
A 複数の要素に異なる遅延値の delay-* クラスを使用します。例えば、5つの要素にそれぞれ delay-0、delay-75、delay-150、delay-300、delay-500 を使用できます。

📖 まとめ

📝 課題

  1. ⭐ transition-colors duration-200 を使用して、ホバー時に背景とテキストカラーがスムーズに変化するボタンコンポーネントを作成してください

  2. ⭐⭐ animate-spin で回転する円と animate-pulse でパルス効果を組み合わせたローディングインジケーターを作成してください

  3. ⭐⭐⭐ transition-all duration-300 と group-hover: を使用して、ホバー時に画像ズーム、オーバーレイ表示、タイトルスライドインの複合アニメーション効果を実現する画像ギャラリーを作成してください

100%