یک کتابخانه سی اس اس ( CSS ) است که توسط ” دنیل ادن ” ( Daniel Eden ) ساخته شده و توسعه داده می شود . این کتابخانه مجموعه ای از انیمیشن های آماده برای استفاده در پروژه های طراحی و توسعه وب سایت می باشد .

یژگی ها :

-سازگار با تمامی مرورگرها ( Cross Browser )

-فابل استفاده در فایل های اچ تی ام ال و  جاوا اسکریپت

-متن باز بودن

نحوه استفاده :

فایل animate.css یا animate.min.css را به صفحه اچ تی ام ال خود و بین <head> <head\> اضافه کنید .

1 <head>
2 <link rel=”stylesheet” href=”animate.css”>
3 </head>

در فایل اچ تی ام ال خود کلاس انیمیشن مورد نظر را به المان دلخواه خود اضافه کنید مانند زیر :

1 <h1 class=”animated fadeOut”></h1>
2 <h1 class=”animated infinite fadeOut”></h1>

در صورت قرار دادن کلاس infinite انیمیشن به صورت مکرر و بی نهایت تکرار می شود در غیر این صورت انیمیشن تنها یکبار اجرا مشود . شما می توانید تعداد تکرار انیمیشن , تاخیر زمان اجرا و طول زمان اجرای آن را با ویرایش سی اس اس تغییر دهید .

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

1 $(‘#yourelement’).addClass(‘animated fadeUp’);

هم چنین برای پایان انیمیشن :

1 $(‘#yourElement’).one(‘webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend’, doSomething);

برای درک بهتر استفاده animate.css در JQuery ویدیویی که توسط خود سازنده در یوتیوب گذاشته شده است را مشاهده کنید

نمایش ویدئو

Animate.css تحت لایسنس MIT License منتشر می شود .