یک کتابخانه سی اس اس ( 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 منتشر می شود .
- دانلود با لینک مستقیم
- پیش نمایش
- lمنبع : بلاگ تم