Animation

انیمیشن در CSS با @keyframes ساخته می‌شه و با animation روی المنت‌ها اعمال می‌شه.
Tailwind به صورت پیش‌فرض چند انیمیشن آماده داره (مثل spin, ping, pulse, bounce) و می‌تونی انیمیشن سفارشی هم تعریف کنی.

📑 کلاس‌های آماده انیمیشن

کلاستوضیح
animate-spinچرخش بی‌نهایت (infinite rotation)
animate-pingایجاد موج/پالس (pulse with scale & fade)
animate-pulseمحو و ظاهر شدن (opacity pulse)
animate-bounceپرش به بالا و پایین (bouncing)

📌 مثال ساده

<div class="flex gap-8">
  <div class="w-12 h-12 bg-blue-500 rounded-full animate-spin"></div>
  <div class="w-12 h-12 bg-green-500 rounded-full animate-ping"></div>
  <div class="w-12 h-12 bg-red-500 rounded-full animate-pulse"></div>
  <div class="w-12 h-12 bg-yellow-500 rounded-full animate-bounce"></div>
</div>

📌 تعریف انیمیشن سفارشی در Tailwind

می‌تونی توی tailwind.config.js انیمیشن و keyframe دلخواهت رو اضافه کنی 👇

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        },
        fadeIn: {
          '0%': { opacity: 0 },
          '100%': { opacity: 1 },
        },
      },
      animation: {
        wiggle: 'wiggle 0.5s ease-in-out infinite',
        fadeIn: 'fadeIn 1s ease-in forwards',
      },
    },
  },
}

استفاده:

<div class="w-16 h-16 bg-purple-500 animate-wiggle"></div>
<div class="w-16 h-16 bg-pink-500 animate-fadeIn"></div>

📌 نکته حرفه‌ای

  • می‌تونی انیمیشن رو ترکیب کنی با کلاس‌های Transition.

  • می‌تونی انیمیشن رو موقتی بذاری (مثلاً با hover فعال بشه):

<button class="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:animate-bounce">
  Hover Me
</button>

✨ این شد مقدمه کامل Animation توی Tailwind.