کلاس 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حتی اگر کتابخانه چند کلاس کمکی مثل animated در اختیار شما قرار دهد تا سریعتر شروع کنید، میتوانید مستقیماً از keyframes استفاده کنید. این روش انعطافپذیر است و به شما اجازه میدهد بدون تغییر ساختار HTML فعلی، Animate.css را در پروژههایتان استفاده کنید.
نمونه:
.my-element { display: inline-block; margin: 0 0.5rem; animation: bounce; /* اشاره مستقیم به keyframe انیمیشن */ animation-duration: 2s; /* فراموش نکنید مدت زمان انیمیشن را تنظیم کنید! */}Animate.css از متغیرهای CSS برای تعریف مدت زمان، تاخیر و تعداد تکرار انیمیشنها استفاده میکند. این ویژگی Animate.css را بسیار انعطافپذیر و قابل شخصیسازی میکند. نیاز دارید مدت زمان انیمیشنی را تغییر دهید؟ کافیست یک مقدار جدید بهصورت محلی یا سراسری تنظیم کنید.
نمونه:
/* این فقط مدت زمان همین انیمیشن خاص را تغییر میدهد */.animate__animated.animate__bounce { --animate-duration: 2s;}
/* این همه انیمیشنها را بهصورت سراسری تغییر میدهد */:root { --animate-duration: 800ms; --animate-delay: 0.9s;}