انیمیشن

کجا میشه استفاده کرد؟ یه مثال ..!
نحوه استفاده
  1. با اضافه کردن کلاس‌ها

    کلاس animate__animated را به یک المنت اضافه کنید، همراه با هر یک از نام‌های انیمیشن (فراموش نکنید پیشوند animate__ را بگذارید!):

    <h5> class="animate__animated animate__bounce">یک المنت انیمیشنی </h5>

    کلاس‌های کمکی

    Animate.css تاخیرهای زیر را فراهم می‌کند:

    animate__delay-2s, animate__delay-3s, animate__delay-4s, animate__delay-5s

    کلاس‌های کند، کندتر، سریع و سریع‌تر

    animate__slow, animate__slower, animate__fast, animate__faster

    کلاس‌های تکرار

    animate__repeat-1, animate__repeat-2, animate__repeat-3, animate__infinite
  2. با استفاده از @keyframes

    اگرچه کتابخانه چند کلاس کمکی مثل کلاس animated را برای شروع سریع در اختیار شما قرار می‌دهد، می‌توانید مستقیم از انیمیشن‌های keyframes استفاده کنید. این روش انعطاف بالایی برای استفاده از Animate.css در پروژه‌های فعلی‌تان بدون نیاز به بازنویسی کد HTML فراهم می‌کند.

    مثال:

    .my-element { display: inline-block; margin: 0 0.5rem; animation: bounce; /* اشاره مستقیم به تعریف @keyframe انیمیشن */ animation-duration: 2s; /* فراموش نکنید مدت زمان را تنظیم کنید! */ }

  3. ویژگی‌های سفارشی CSS (متغیرهای CSS)

    Animate.css از ویژگی‌های سفارشی (که به آن‌ها متغیرهای CSS هم گفته می‌شود) برای تعیین مدت زمان، تاخیر و تعداد تکرار انیمیشن استفاده می‌کند. این باعث می‌شود Animate.css بسیار انعطاف‌پذیر و قابل تنظیم باشد. نیاز دارید مدت زمان یک انیمیشن را تغییر دهید؟ کافی است مقدار جدیدی را به‌صورت کلی یا محلی تنظیم کنید.

    مثال:

    /* این فقط مدت زمان این انیمیشن خاص را تغییر می‌دهد */ .animate__animated.animate__bounce { --animate-duration: 2s; } /* این تمام انیمیشن‌ها را به صورت کلی تغییر می‌دهد */ :root { --animate-duration: 800ms; --animate-delay: 0.9s; }