۱۲ منبع عالی برای انیمیشن ها در CSS

کتابخانه ها و ابزارهای انیمیشن در CSS برای متحرک کردن عناصر در وب کاربرد دارند. ایجاد انیمیشن های معنی دار و زیبای CSS می تواند پیچیده و وقت گیر باشد، اما خوشبختانه منابع زیادی برای کمک به آغاز فرآیند خلاقانه شما وجود دارد. این مجموعه شامل بهترین منابع کتابخانه های انیمیشن در CSS می باشند.

یکی از آنها را که برای پروژه شما مناسب است انتخاب کنید و بلافاصله شروع کنید.از هرکدام از آنها به عنوان نقطه ی شروعی برای ایجاد سفارشی نام تجاری خود نیز میتوانید استفاده کنید. همچنین برخی از صفحات و میانبر های مفید برای کمک به یادگیری شما وجود دارند.

1.Animista

Animista نوعی محیط است که میتوانید در آن مجموعه ای از انیمیشن های پیش ساخته شده CSS را ویرایش و اجرا کنید. سپس کد مورد نظر خود را برای استفاده در پروژه هایتان کپی کنید. Animista کار خود را به عنوان یک پروژه جانبی برای توسعه یکپارچه Ana Travas آغاز کرد، که هنوز در حال توسعه آن است.

2.CSS3 Animation Cheat Sheet

CSS3 Animation Cheat Sheet پروژه ای مفید است و مجموعه ای از انیمیشن های از پیش تنظیم شده را برای استفاده در پروژه های وب فراهم می آورد. برای شروع، و به منظور کمک به شما دستورالعمل های مشخصی  وجود دارد، اما اساسا، شما فقط باید  فایل استایل مورد نظر را به وب سایت خود اضافه کرده و کلاس های CSS از پیش ساخته شده را برای متحرک سازی بر روی عناصر مورد نظر خود اعمال کنید.

این پروژه از keyframe های CSS3 استفاده میکند و این بدان معناست که شما نیاز ندارید در مورد موقعیت عناصری که متحرک سازی میشوند نگرانی داشته باشید.

3.Animate.css

این کتابخانه شامل حدودا 77 انیمیشن است که همه آنها در CSS ایجاد شده و آماده استفاده هستند. به سادگی فایل CSS این کتابخانه را به پروژه خود اضافه کنید. در این صورت هنگامی که کلاس ها را به یک عنصر اضافه می کنید، انیمیشن اتفاق می افتد.

این کار برای زمانی که کلاس ها را با استفاده از جاوا اسکریپت به عناصر اضافه میکنید نیز به خوبی کار میکند. حجم فایل این کتابخانه زمانی که فشرده سازی میشود بسیار کوچک است. اما اگر شما نمی خواهید همه چیز را در سایت خود بارگذاری کنید، این پروژه همچنان یک منبع عالی الهام بخش و مفید باشد. Animate.css توسط  Dan Eden کامپایل شده است.

 این کتابخانه تقریبا هر انیمیشنی از CSS که شما می توانید به آن نیاز داشته باشید، از اصول (bounce, fade in) تا چیز های هیجان انگیر تر (Jack in the Box, Jello) را شامل میشود. از منوی کشویی در صفحه اصلی سایت این کتابخانه برای دیدن عناوین هر یک از سبک های مختلف استفاده کنید.

4.Hover.css

همانند Animate.css کتابخانه ی Hover.css نیز دارای مجموعه ای از افکت های CSS است که می توانید در پروژه های خود استفاده کنید. این کتابخانه به طور خاص برای متحرک سازی های دکمه های موجود در صفحه ایجاد شده است. این کتابخانه تقریبا میتواند برای هر پروژه ای سازگار شود. کتابخانه Hover.css دارای تقریبا هر انیمیشنی است که ممکن است برای تعامل با یک عنصر نیاز داشته باشد.

5.CSShake

CSShake کتابخانه ای از انیمیشن های CSS است که برای تکان دادن عناصر اختصاص یافته است. این کتابخانه دارای تعدادی کلاس است که می توانید برای تکان خوردن های مختلف به عناصر اضافه کنید. این کتابخانه از keyframe ها و مشخصه transform برای ایجاد انیمیشن هایی که گاهی اوقات دیوانه کننده به نظر می رسند استفاده می میکند.

با این حال نمیتوان این کتابخانه را نادیده گرفت. در حال حاضر نیز کتابخانه Reshake  وجود آمده است که برای اعمال انیمیشن بر روی کامپوننت های ری اکت استفاده میشود.

6.Obnoxious.css

Obnoxious.css دقیقا همانطور که از نام آن پیداست توسط Tim Holman ساخته شده است . این کتابخانه آنچه را که ممکن است با انیمیشن های CSS امکان پذیر باشد،اما بیشتر آنچه را که شما نباید با انیمیشن های CSS انجام دهید را بررسی میکند. در حالی که به عنوان یک کتابخانه انیمیشن ارائه شده است، اما بیشتر به منظور نمایش انیمیشن ها طراحی شده است.

7.Replainless.CSS

Replainless.css یک کتابخانه متحرک کوچک و سبک وزن CSS است که بر روی ایجاد انیمیشن هایی که باعث تغییر رنگ از طرف مرورگر های مختلف نمیشوند تمرکز دارد (تا زمانی که به درستی مورد استفاده قرار بگیرند). این انیمیشن هه فوق العاده سریع و کاربردی هستند!

8.Animate Plus

این کتابخانه برای سایت های موبایلی بسیار مناسب است. Animate Plus به خاطر زیبایی و جذابیتش محوبیت زیادی را بدست آورده است . یکی از متفکران پشت این کتابخانه یعنی، بنجامین دکک، یک کتابخانه متحرک CSS و SVG ایجاد کرده است که عملکردی عالی دارد و این امر به ویژه برای تلفن همراه مناسب است.

9.Motion UI

انیمیشن ساز های قدرتمندی مانند Move UI ابزار های مفید در CSS محسوب میشوند. این ابزار که شکل فایل Sass است باعث می شود که انیمیشن های سفارشی را به سادگی بر روی رابط کاربری خود اعمال کنید. این ابزار بسیار قدرتمند است. شما می توانید انیمیشن ها را برای برآورده ساختن نیازهای خود ایجاد و تنظیم کنید، سپس آنها را با استفاده از جاوا اسکریپت فراخوانی کنید.

10.BounceJS

اگر می خواهید کتابخانه ای از انیمیشن ها برای خود ایجاد کنید، BounceJS یک ابزار مفید برای شما است. این سایت دارای مجموعه ای از قالب های از پیش ساخته شده است که میتواند براش ما بسیار کاربری باشد

11.GreenSock Animation Platform

GSAP یک فریمورک انیمیشن در جاوا اسکریپت است. اگر شما نیاز به ایجاد انیمیشن های پیچیده تر (مانند تبلیغات بنر و یا تصاویر قهرمانانه) دارید، GSAP دارای مجموعه ای از ابزارهاست که کار شما را ساده میکند. اگر میخواهید فراتر از انیمیشن های موجود در CSS حرکت کنید این فریمورک برای شما ساخته شده است.

12.Easing functions cheatsheet

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

 

منبع: لرن سورس