Tailwind CSSでアニメーション — animate・transition・group/peer
animate-pulse のような組み込みアニメーション、transition + hover: の状態変化、そして group / peer による親子・兄弟連動まで。本ガイドでは Tailwind のアニメーション機能を体系的に解説します。
組み込みアニメーション animate-*
Tailwind には animate-spin（回転）animate-ping（波紋）animate-pulse（明滅）animate-bounce（跳ね）が標準搭載されています。クラスを付けるだけで動きます。
例: ローディングスピナーは animate-spin、通知の波紋は animate-ping、スケルトンは animate-pulse。
transition + hover: で状態変化
transition を付け、hover:scale-105 hover:shadow-lg などの状態クラスを足すだけで滑らかなホバーが完成します。duration-200 ease-out で速度・イージングも調整可能。
例: グラデーションCTAは bg-gradient-to-r from-pink-500 to-purple-500 transition hover:scale-105。
group / group-hover — 親ホバーで子を制御
親要素に group、子要素に group-hover:opacity-100 を付けると、親にホバーしたとき子要素を動かせます。画像にホバーしてキャプションを出すギャラリーカードの定番。
peer / peer-checked — 兄弟要素の状態を参照
フォーム入力の状態に応じて隣の要素を変えるのが peer。チェックボックスに peer、隣の要素に peer-checked:bg-pink-600 を付ければ、JS なしでトグルスイッチが作れます。
実装デモ：Tailwind Toggle
カスタムアニメーションの追加
標準にない動きは tailwind.config.js の theme.extend.keyframes と animation に定義して animate-{名前} で使えます。
プロジェクト共通のブランドアニメーションはここに集約すると管理しやすくなります。
FAQ
Tailwind だけで複雑なアニメは作れる？
animate-ping と animate-pulse の違いは？
Tailwind CDN と PostCSS どちらを使う？
transition が効かないときは？
hidden→表示の切替は transition できないため、opacity や transform で表現します。関連書籍
学びを止めない · Amazonサブスク
※ Amazonアソシエイト・プログラム参加。リンク経由のご購入で運営者が紹介料を受け取る場合があります。