آموزش جامع Animate.css

🏭معرفی و نصب

Animate.css یکی از محبوب‌ترین کتابخانه‌های CSS است که توسط Daniel Eden ساخته شده. این کتابخانه بیش از ۷۷ انیمیشن آماده ارائه می‌دهد که به سادگی با اضافه کردن چند کلاس CSS فعال می‌شوند — بدون نیاز به یک خط کد JavaScript یا CSS اضافه.

مقایسه رویکردها

نصب

<!-- روش ۱: فایل لوکال (همین صفحه) -->
<link rel="stylesheet" href="animate.min.css">

<!-- روش ۲: CDN jsDelivr -->
<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css">

<!-- روش ۳: NPM -->
// npm install animate.css
import 'animate.css';

ساختار اصلی — دو کلاس اجباری

برای هر انیمیشن دقیقاً به دو کلاس نیاز دارید:

<!-- ✅ درست: کلاس پایه + کلاس انیمیشن -->
<div class="animate__animated animate__bounce">من می‌پرم!</div>
<div class="animate__animated animate__fadeInUp">من از پایین می‌آیم!</div>
<div class="animate__animated animate__zoomIn">من بزرگ می‌شوم!</div>

<!-- ❌ اشتباه: فراموش کردن کلاس پایه -->
<div class="animate__bounce">کار نمی‌کند!</div>

دمو: کلیک کنید تا انیمیشن را ببینید

⚙کلاس‌های کمکی (Utility Classes)

Animate.css کلاس‌های کمکی برای کنترل سرعت، تأخیر و تکرار انیمیشن ارائه می‌دهد — همه بدون نوشتن CSS.

کنترل سرعت (Speed)

مدت زمان پیش‌فرض انیمیشن ۱ ثانیه است:

کنترل تأخیر (Delay)

<!-- تأخیر از ۱ تا ۵ ثانیه -->
<div class="animate__animated animate__fadeIn animate__delay-1s">بعد از ۱ ثانیه</div>
<div class="animate__animated animate__fadeIn animate__delay-3s">بعد از ۳ ثانیه</div>
<div class="animate__animated animate__fadeIn animate__delay-5s">بعد از ۵ ثانیه</div>

کنترل تکرار (Repeat)

<!-- تکرار ۱ تا ۳ بار -->
<div class="animate__animated animate__bounce animate__repeat-2">۲ بار</div>

<!-- تکرار بی‌نهایت -->
<div class="animate__animated animate__pulse animate__infinite">همیشه</div>

<!-- ترکیب همه کلاس‌ها -->
<div class="animate__animated animate__heartBeat animate__faster animate__delay-2s animate__infinite">
  دکمه تخفیف ویژه!
</div>

🌟شخصی‌سازی با CSS Variables

در Animate.css v4، هر چیزی با متغیرهای CSS قابل کنترل است. این متغیرها را می‌توان روی هر المان جداگانه تنظیم کرد:

<!-- مدت دلخواه -->
<div class="animate__animated animate__bounceIn" style="--animate-duration: 3s">کند</div>
<div class="animate__animated animate__bounceIn" style="--animate-duration: 0.3s">سریع</div>

<!-- تأخیر دقیق -->
<div class="animate__animated animate__fadeIn" style="--animate-delay: 1.5s">۱.۵ ثانیه تأخیر</div>

<!-- تکرار دقیق -->
<div class="animate__animated animate__shakeX" style="--animate-repeat: 5">۵ بار تکان</div>

<!-- تغییر global برای کل سایت در CSS -->
:root {
  --animate-duration: 0.6s; /* همه انیمیشن‌ها 40% سریع‌تر */
}

💻ترکیب با JavaScript

کلاس‌های Animate.css به محض اضافه شدن اجرا می‌شوند. برای اجرای پویا (با کلیک، رویداد و...) باید با JavaScript کلاس‌ها را مدیریت کنید.

الگوی اشتباه — بدون حذف کلاس

// ❌ اگر کلاس را حذف نکنید، دفعه دوم انیمیشن اجرا نمی‌شود!
function badApproach() {
  document.querySelector('.box').classList.add('animate__animated', 'animate__bounce');
  // کلاس هرگز حذف نمی‌شود → کلیک دوم: هیچ!
}

الگوی صحیح — با animationend

function animateEl(el, animName) {
  // اضافه کردن کلاس‌ها
  el.classList.add('animate__animated', animName);

  // {once:true} → listener بعد از اجرای یکبار خودکار حذف می‌شود
  el.addEventListener('animationend', () => {
    el.classList.remove('animate__animated', animName);
  }, { once: true });
}

// استفاده
animateEl(document.querySelector('.btn'), 'animate__tada');

تابع کمکی پیشرفته (Promise-based)

با استفاده از Promise می‌توانید بعد از پایان انیمیشن کد دیگری اجرا کنید:

function animate(el, animName, duration = null) {
  return new Promise(resolve => {
    if (duration) el.style.setProperty('--animate-duration', duration);
    el.classList.add('animate__animated', animName);
    el.addEventListener('animationend', () => {
      el.classList.remove('animate__animated', animName);
      el.style.removeProperty('--animate-duration');
      resolve();
    }, { once: true });
  });
}

// می‌توانید انیمیشن‌ها را زنجیر کنید!
async function sequence() {
  await animate(box, 'animate__fadeInUp');
  await animate(box, 'animate__pulse', '0.5s');
  await animate(box, 'animate__shakeX');
  alert('همه انیمیشن‌ها تمام شدند!');
}

👁Scroll Animations با Intersection Observer

یکی از پرکاربردترین کاربردهای Animate.css، اجرای انیمیشن هنگامی است که المان وارد viewport کاربر می‌شود. این کار با IntersectionObserver بومی مرورگر انجام می‌شود.

الگوی پایه

// تعریف observer
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const el = entry.target;
      const anim = el.dataset.animate; // از data-animate می‌خواند
      el.classList.add('animate__animated', anim);
      observer.unobserve(el); // فقط یکبار اجرا شود
    }
  });
}, { threshold: 0.2 }); // 20% از المان دیده شده باشد

// attach به همه المان‌های دارای data-animate
document.querySelectorAll('[data-animate]').forEach(el => observer.observe(el));

<!-- HTML: -->
<div data-animate="animate__fadeInUp">هنگام اسکرول ظاهر می‌شوم</div>
<div data-animate="animate__slideInRight">از سمت راست می‌آیم</div>

نسخه پیشرفته با تأخیر stagger

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry, i) => {
    if (entry.isIntersecting) {
      const el = entry.target;
      // تأخیر پلکانی بر اساس index
      el.style.setProperty('--animate-delay', `${i * 0.15}s`);
      el.classList.add('animate__animated', el.dataset.animate);
      observer.unobserve(el);
    }
  });
}, { threshold: 0.1 });

🛠پروژه‌های واقعی

در این بخش چند کامپوننت واقعی می‌بینید که در پروژه‌های روزمره استفاده می‌شوند.

۱. سیستم Toast Notification

// نمایش toast با انیمیشن ورود/خروج
function showToast(message, type = 'success') {
  const toast = document.createElement('div');
  toast.className = `toast toast-${type} animate__animated animate__fadeInDown`;
  toast.textContent = message;
  document.getElementById('toast-container').appendChild(toast);

  setTimeout(() => {
    toast.classList.replace('animate__fadeInDown', 'animate__fadeOutUp');
    toast.addEventListener('animationend', () => toast.remove(), {once:true});
  }, 3000);
}

۲. کارت‌های محصول با ورود پلکانی

۳. دکمه تخفیف با انیمیشن جلب‌توجه

📚مرجع کامل انیمیشن‌ها

روی هر کارت کلیک کنید تا انیمیشن روی باکس اجرا شود.

جلب توجه (Attention Seekers)

ورودی‌های Fade

خروجی‌های Fade

ورودی‌های Bounce

ورودی‌های Zoom

ورودی‌های Slide

ورودی‌های Back

ورودی‌های Rotate

Flip & LightSpeed & ویژه

♻دسترس‌پذیری و Performance

prefers-reduced-motion

Animate.css به‌صورت پیش‌فرض از @media (prefers-reduced-motion: reduce) پشتیبانی می‌کند. اگر کاربر در سیستم‌عامل خود «کاهش حرکت» را فعال کند، تمام انیمیشن‌ها خودکار غیرفعال می‌شوند.

/* کد داخلی Animate.css v4 */
@media (prefers-reduced-motion: reduce) {
  .animate__animated {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

بهترین روش‌ها برای Performance

• فقط properties که GPU accelerate می‌شوند را انیمیت کنید: transform و opacity سریع‌ترند؛ از width یا margin پرهیز کنید.
• تعداد انیمیشن‌های همزمان را محدود کنید: بیشتر از ۳-۴ انیمیشن همزمان در صفحه تجربه کاربری را خراب می‌کند.
• در پروژه‌های بزرگ فقط انیمیشن‌های مورد نیاز را import کنید: با PostCSS می‌توانید یک subset کوچک بسازید.
• انیمیشن‌های infinite را با دقت استفاده کنید: CPU مداوم درگیر می‌شود.

Custom Build با NPM

# نصب
npm install animate.css

/* import کل کتابخانه */
import 'animate.css';

/* یا فقط یک انیمیشن خاص در SCSS */
@use 'animate.css/source/bouncing_entrances/bounceIn';
@use 'animate.css/source/fading_exits/fadeOut';

🚀زمین بازی کد (Playground)

کلاس‌های Animate.css را همین‌جا روی عناصر امتحان کن و انیمیشن را زنده ببین. یک مثال را از منوی بالا انتخاب کن، کلاس‌هایی مثل animate__animated animate__bounce را تغییر بده، و دکمهٔ ▶ اجرا را بزن. نسخهٔ ۴.۱.۱ همین صفحه به‌صورت آفلاین داخل تمرین بارگذاری می‌شود.