انیمیشن

چطور استفاده شود؟ چند مثال ببینید ..!
توضیحات تصویر
توضیحات تصویر توضیحات تصویر
چطور استفاده کنم
  1. با افزودن کلاس CSS

    با افزودن کلاس animate__animated به یک المنت HTML

    <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

    کلاس کمکی animation امکان استفاده سریع از انیمیشن ها را فراهم میکند. با این وجود میتوانید به طور مستقیم از keyframes نیز استفاده کنید. با این روش برای شما انعطاف لازم فراهم میشود تا انیمیشن دلخواه خود را وارد کنید.

    مثال:

    .my-element { display: inline-block; margin: 0 0.5rem; animation: bounce; /* referring directly to the animation's @keyframe declaration */ animation-duration: 2s; /* don't forget to set a duration! */ }
  3. صفات سفارشی CSS (CSS Variables)

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

    مثال:

    /* This only changes this particular animation duration */ .animate__animated.animate__bounce { --animate-duration: 2s; } /* This changes all the animations globally */ :root { --animate-duration: 800ms; --animate-delay: 0.9s; }