Web制作

  1. ブログトップ
  2. Web制作
  3. TailwindCSSでアニメーションを作る方法

Web制作

TailwindCSSでアニメーションを作る方法

仲川 舞

TailwindCSSでは、組み込みのアニメーションクラスを使うだけで簡単にアニメーションを追加できます。基本的なクラスと、使い方を紹介します。

Tailwind CSSのアニメーションクラス

Tailwind CSSには、あらかじめ用意されたアニメーションクラスがあります。以下のクラスを要素に適用するだけでアニメーションが動きます。

  • animate-bounce: 要素が上下に跳ねるアニメーション
  • animate-spin：要素が回転するアニメーション
  • animate-ping：要素が拡大と収縮を繰り返すアニメーション
  • animate-pulse：要素がフェードイン・アウトを繰り返すアニメーション

animate-bounce:上下に跳ねるアニメーション

<button class="animate-bounce font-semibold bg-blue-500 text-white py-2 px-4 rounded">
  注目ボタン
</button>

animate-spin:要素が回転するアニメーション

<svg class="animate-spin -ml-1 mr-3 h-10 w-10 text-black" 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-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>

animate-ping:要素が拡大・収縮を繰り返すアニメーション

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

animate-pulse:要素がフェードイン・アウトするアニメーション

<button class="animate-pulse font-semibold bg-blue-500 text-white py-2 px-4 rounded">
  読み込み中...
</button>

カスタムアニメーションを作る

より複雑なアニメーションを作りたい場合は、tailwind.config.jsを使って独自のキーフレームとアニメーションを定義できます。

tailwind.config.jsを編集

module.exports = {
  theme: {
    extend: {
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        },
      },
      animation: {
        wiggle: 'wiggle 1s ease-in-out infinite',
      },
    },
  },
};

HTMLで使用

<div class="animate-wiggle bg-red-500 text-white p-4 rounded">
  カスタムアニメーション
</div>

終わりに

TailwindCSSでは、組み込みのアニメーション用のクラスを使うだけで簡単にアニメーションを実装できます。カスタムアニメーションを追加すれば、さらに自由度の高いデザインが可能です！

spoool blog

TOP