معرفی ۴ کتابخانه انیمیشن CSS

نویسنده پوریا ستایش پوریا ستایش
1399/05/11
0
48
زمان مطالعه 3 دقیقه
معرفی ۴ کتابخانه انیمیشن CSS

گاهی اوقات برای تعامل بیشتر با کاربر و زیبایی بیشتر المان‌های صفحه نیاز به یک سری انیمیشن داریم. گاهی اوقات نوشتن این گونه انیمیشن‌ها وقت بسیاری از ما می‌گیرند. در نتیجه می‌بایست به سمت کتابخانه‌ انیمیشن برویم. در ادامه شما را با ۴ عدد از بهترین کتابخانه‌های انیمیشن CSS آشنا خواهیم کرد.

لیست کتابخانه‌ها به شرح زیر است:

  • کتابخانه انیمیشن Animate.css
  • کتابخانه انیمیشن Magic Animation
  • کتابخانه انیمیشن CSShake
  • کتابخانه انیمیشن Hover.css

کتابخانه انیمیشن Animate.css

کتابخانه Animate.css

Animate.css یکی از کتابخانه‌های انیمیشن کوچک است که برای استفاده از آن مشکلی نخواهید داشت. اضافه کردن این کتابخانه به پروژه‌ها بسیار راحت است. به این صورت که فایل CSS را در پروژه لینک می‌کنیم و کلاس مورد نظر را به عنصر دلخواه در HTML می‌دهیم. اگر بخواهید در رویداد خاصی از این انیمیشن‌ها استفاده کنید می‌توانید از Jquery برای آن رویداد استفاده کنید. برای مشاهده سایت این کتابخانه اینجا کلیک کنید.

  • خالق: Daniel Eden
  • منتشرشده در: سال ۲۰۱۳
  • آخرین ورژن: ۳.۷.۲
  • محبوبیت: ۶۲۲۸۴ ستاره در گیتهاب
  • حجم کتابخانه: ۵۶.۷ کیلوبایت (نسخه فشرده شده یا اصطلاحاً minified)

در زمان نوشتن این مطلب این کتابخانه یکی از محبوب‌ترین‌ها است و به‌طور گسترده استفاده می‌شود. فایل CSS فشرده آن نیز دارای حجم مناسبی است که برای استفاده در دستگاه‌های مختلف مثل موبایل کاملاً مناسب است. باید بدانید هم اکنون animate.css در حال پیشرفت است. منتظر نسخه ۴ آن باشید. نسخه ۴ آن از پراپرتی‌های شخصی CSS پشتیبانی می‌کند. Animate.css یکی از آن کتابخانه‌هایی است که هر طراحی می‌تواند از آن استفاده کند و برای هر پروژه‌ای مناسب است.

کتابخانه انیمیشن Magic Animation

کتابخانه magic animation

اندازه فایل Magic Animation در مقایسه با Animate.css در یک حد ​​است. این کتابخانه به خاطر داشتن انیمیشن‌هایی مثل «Magic»، «Foolshin» و «Bomb» شناخته شده است. برای مشاهده پیش‌نمایش این نوع انیمیشن‌ها به «سایت رسمی این کتابخانه» مراجعه کنید.

  • آخرین ورژن: ۱.۴.۱
  • محبوبیت: ۶۰۷۴ ستاره در گیتهاب
  • حجم کتابخانه: ۵۴.۹ کیلوبایت

اگر به دنبال انیمیشن‌هایی هستید که یک مقدار غیرمعمولی به نظر برسند، از کتابخانه Magic Animation استفاده کنید. هرگز پشیمان نمی‌شوید!

کتابخانه انیمیشن CSShake

کتابخانه CSShake

CSShake همان‌طور که از نامش پیداست دقیقاً همان کاری را انجام می‌دهد که اسمش هست! یک کتابخانه CSS است که مخصوص تکان دادن عناصر در صفحه وب شما طراحی شده است. همان‌طور که انتظار دارید، انواع مختلفی برای لرزش اجزای وب شما در این کتابخانه وجود دارد. برای مشاهده پیش‌نمایش انیمیشن‌های CSShake اینجا کلیک کنید.

  • آخرین ورژن: ۱.۵.۰
  • محبوبیت: ۴۰۳۹ ستاره در گیتهاب
  • حجم کتابخانه: ۲۱.۹ کیلوبایت

CSShake طیف وسیعی از انیمیشن‌های جالب «لرزش یا Shake» را ارائه می‌دهد و هیچ کمبودی در این کتابخانه مشاهده نمی‌شود.

کتابخانه انیمیشن Hover.css

کتابخانه انیمیشن hover.css

Hover.css یک کتابخانه انیمیشن از نوع CSS است که برای دکمه‌ها و سایر عناصر در وب سایت شما طراحی شده است. ترنزیشن های دو بعدی واقعاً زیبایی دارد، همچنین انیمیشن‌های دارد که به‌خوبی ساخته شده است و نقصی در آن‌ها دیده نمی‌شود. برای مشاهده پیش‌نمایش انیمیشن‌های Hover.css اینجا کلیک کنید.

  • آخرین ورژن: ۲.۳.۲
  • محبوبیت: ۲۱۸۱۸ ستاره در گیتهاب
  • حجم کتابخانه: ۹۳ کیلوبایت

Hover.css برای انیمیشنی کردن عناصری مناسب است که جدا از بخش خاصی است مثل دکمه‌ها ، لوگوها، کامپوننت‌های SVG و... به‌احتمال زیاد، معروف‌ترین افکت‌های انیمیشن آن Speech Bubbles و Curls (انیمیشنی شبیه به بلند کردن گوشه کاغذ) است.

در نهایت کدام کتابخانه انیمیشن CSS را انتخاب کنیم؟

بستگی به شما دارد. هر ۴ کتابخانه، انیمیشن‌های مناسبی دارند ولی اگر به دنبال یک کتابخانه با حجم کم و تعداد زیاد انیمیشن‌های جذاب هستید پیشنهاد من Animate.css است. اگر برای اجزاء صفحه مثل دکمه‌ها به دنبال انیمیشن هستید می‌توانید از Hover.css استفاده کنید. اگر فقط به دنبال انیمیشن‌های تکان دهنده، لرزشی یا Shake هستید استفاده از CSShake مناسب است. انیمیشن‌های کتابخانه magic animation هم مناسب هستند ولی کمی خارج از عرف و با اغراق زیاد هستند، اگر به دنبال این‌گونه انیمیشن‌ها هستید می‌توانید از آن استفاده کنید.

آیا برای پروژه‌های خود از کتابخانه‌های انیمیشن استفاده می‌کنید؟ کتابخانه‌های انیمیشن مورد علاقه شما کدام هستند؟ خوشحال می‌شویم نظرات و تجربیات شما را بشنویم.