Zenn
🩷

Tailwind CSSで作る！アニメーション付き共通UIパターン集【@apply対応】

に公開
Tailwind CSS
Tailwind CSS
animation
アニメーション
簡単
tech

地味だけど地味じゃない。再利用できるUIのアニメーションまとめ。

はじめに

案件で何度も出てくる「ちょっと動くUI」。

  • ホバーで色が変わるボタン
  • スクロールに応じてフェードイン
  • モーダルのふわっと開くアニメーション
  • ローディング時のスピナー

Tailwind CSSでこれらを手早く仕上げるには、パターン化＆共通化が最強です。

この記事では、Tailwind CSS v4を使ってよくあるUIアニメーションを「@apply対応のスタイル」としてまとめました。
プロジェクトで再利用しやすい形で紹介していきます。

前提環境

  • Tailwind CSS v4
  • Play CDN または実動ビルド環境
  • @apply を使ったスタイル抽出に対応

インストール例

# CDNで始める
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>

または

# プロジェクト経由
npm install -D tailwindcss
npx tailwindcss init

今回紹介するパターン

  1. ホバーアニメーションボタン
  2. スクロールでフェードイン
  3. モーダル開閉
  4. アコーディオン
  5. スピナー

1. ホバーアニメーションボタン

/* button.css */
.btn-primary {
  @apply px-4 py-2 bg-blue-500 text-white rounded-lg transition-colors duration-300 ease-in-out hover:bg-blue-600;
}

使用例：

<button class="btn-primary">送信</button>

2. スクロールでフェードイン（Intersection Observer）

/* fadein.css */
.fade-in {
  @apply opacity-0 translate-y-4 transition-all duration-700 ease-out;
}
.fade-in.show {
  @apply opacity-100 translate-y-0;
}

JavaScript（Vanilla JS or React）：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add("show");
    }
  });
});

document.querySelectorAll(".fade-in").forEach(el => observer.observe(el));

3. モーダル開閉アニメーション

/* modal.css */
.modal-enter {
  @apply opacity-0 scale-95;
}
.modal-enter-active {
  @apply opacity-100 scale-100 transition-all duration-300 ease-out;
}
.modal-leave {
  @apply opacity-100 scale-100;
}
.modal-leave-active {
  @apply opacity-0 scale-95 transition-all duration-200 ease-in;
}

構造例：

<div class="modal modal-enter">...</div>

※JSでクラスの切り替えが必要です。

4. アコーディオン（開閉アニメ）

/* accordion.css */
.accordion-content {
  @apply max-h-0 overflow-hidden transition-all duration-500 ease-in-out;
}
.accordion-content.open {
  @apply max-h-96;
}

構造例：

<div class="accordion-content">...</div>

※JSで.openクラスを付与・削除。

5. スピナー（ローディング）

<div class="w-6 h-6 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>

Tailwindのanimate-spinを使った簡易スピナーです。

🛠 補足Tips & トラブルシューティング

@applyが効かない？

  • Tailwind v4ではcontent: ""などのCSSでしか表現できないプロパティは@applyできません。
  • エラーメッセージが出る場合はそのスタイルをクラスではなく直にCSSで書く必要あり。

transition-allは便利だけど注意

  • すべてのプロパティにトランジションがかかるため、意図しないアニメーションが発生することがあります。
  • できるだけ transition-colors, transition-transform など限定的に指定するのがベター。

フェードインが動かない

  • .show クラスが付与されているか確認
  • opacity や transform は初期状態がしっかり指定されていないとアニメーションされません

アニメーションがカクつく

  • transition の duration が短すぎると不自然になります。300〜700msあたりが自然です
  • スクロール系は will-change: transform を使うと滑らかに

まとめ

Tailwind CSS v4を使えば、@applyと組み合わせてアニメーションを簡潔かつ再利用性高く実装できます。

この記事で紹介したようなパターンをあらかじめ共通クラスとして整備しておくと、

  • 開発スピードの向上
  • デザインの一貫性維持
  • コードの保守性向上

といったメリットがあります。

自分やチームで使うUIキット的なCSS集として、ぜひ活用してみてください！

Discussion