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

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

ANIMATE.CSS :

کتابخانه ANIMATE.CSS یکی از محبوب ترین و ساده ترین کتابخانه‌ های انیمیشن سازی CSS می‌باشد، این کتابخانه تقریبا دارای 78 انیمیشن است. Daniel Eden سازنده کتابخانه ANIMATE در سال 2013 و همچنین توسعه دهنده آن می‌باشد. کتابخانه ANIMATE.CSS به دلیل حجم کمی که دارد، باعث شده در موبایل هم به خوبی قابل استفاده باشد. همچنین برای مدیریت اجرای انیمیشن از Jquery استفاده می‌شود.

نحوه اجرا:

<h1 class="animate__animated animate__bounce">An animated element</h1>

• اندازه فایل کتابخانه: 70.1 کیلوبایت
• لایسنس:MIT
• زبان های استفاده شده: CSS – HTML -JavaScript

CSShake :

Lionel سازنده کتابخانه CSShake در سال 2014 است. همانطور که از اسمش (Shake) معلومه، کتابخانه ای برای لرزش عناصر در صفحه وب سایت طراحی شده. Lionel در یک پروژه بزرگ نیاز به افکت های لرزان داشت که آن را با Vanhilla CSS ساخت، سپس به صورت کتابخانه CSS در اختیار عموم قرار داد.

پس از ورود به سایت شاهد چند نمونه از افکت های لرزان این کتابخانه می‌باشید. که درکنار تنوع در نوع لرزش افکت ها، قادر به تغیر transtion به دو حالت سریع و کند است. کد های هرکدام در دسترس عموم قرار دارد.

نحوه اجرا:

<!-- To shake constant -->
<div class="shake-slow shake-constant"></div>
<!-- and stops on :hover -->
<div class="shake-slow shake-constant shake-constant--hover"></div>

<!-- Freeze animation at that point when :hover -->
<div class="shake-crazy shake-freeze"></div>

• اندازه فایل کتابخانه: 78.8 کیلوبایت
• لایسنس: MIT
• زبان های استفاده شده: CSS – HTML -JavaScript

Hover.CSS :

در سال 2014 an Lunn کتابخانه Hover.CSS را ساخت. همانطور که از اسمش پیداست، برای متحرک سازی لوگوها در زمان hover استفاده می‌شود. و دارای transtionها و افکت‌های دو بعدی زیبایی هست که با عناصرهای مختلف کار می‌کند. بهترین گزینه برای انیمیتت کردن گسسته صفحه های وب سایت Hover.CSS است. کتابخانه Hover.CSS شامل یک لیست جامع از انیمیشن‌های مختلفه که باعث سایز بالای این کتابخانه می‌شود.

نمونه افکت های انیمیشنی که در سایت قرار دارد به صورت خلاصه و مفید دسته بندی شده که پس از hover بر روی افکت‌ها، قادر به مشاهده حرکت آنها هستید. متاسفانه کد افکت‌های نمونه سایت در دسترس قرار ندارد.

نحوه اجرا:

/* Grow */
.hvr-grow {
    display: inline-block;
    vertical-align: middle;
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    transition-duration: 0.3s;
    transition-property: transform;
}

.hvr-grow:hover,
.hvr-grow:focus,
.hvr-grow:active {
    transform: scale(1.1);
}

• اندازه فایل کتابخانه: 93.0 کیلوبایت
• لایسنس: MIT
• زبان های استفاده شده: CSS – HTML -JavaScript

cssanimation:

cssanimation.io مجموعه ای از انیمیشن‌های مختلف است، که حدود 200 نوع انیمیشن در کتابخانه خود قرار دارد. اگر در کتابخانه cssanimation  انیمیشن موردنظرتان پیدا نشد، به احتمال زیاد در باقی کتابخانه‌های انیمیشن نیز پیدا نمی‌شود. کد css و Greensock هرکدام از انیمیشن ها در دسترس قرار گرفته است. این سایت مانند Animista می‌توانید یک انیمیشن انتخاب کنید و کد آن را مستقیماً از سایت دریافت کنید‌، یا کل کتابخانه را دانلود کنید.

نمونه های انیمیشن زیادی در سایت قرار دارد و در کنار بعضی از انیمنیشن های بخصوصی کلمه random نوشته شده است. با زدن روی کلمه random، انیمیشن در حروف آن کلمه موردنظر به صورت تصادفی و بدون نظم اجرا می‌شود.

نحوه اجرا: 

:CSS Source

.hu__hu__ { animation: hu__hu__ infinite 2s ease-in-out }
@keyframes hu__hu__ {
    50% { transform: translateY(30px) }
}

:Greensock Source

Greensock Source TweenMax.to(".hu__hu__", 1.5, {y:30, yoyo: true, repeat:-1, ease: Sine.easeInOut});

• اندازه فایل کتابخانه: 34 کیلوبایت
• لایسنس: MIT
• زبان های استفاده شده: CSS – JavaScript

Magic Animations :

Magic Animations یکی از بهترین کتابخانه‌ های انیمیشن css موجود است. که نوع ساختاریی شبیه به کتابخانه ANIMATE.CSS دارد. ولی با این تفاوت که تعدادی  انیمیشن بخصوصی در این کتابخانه قرار گرفته است. و حجم فایل ها نسبت به ANIMATE.CSS کوچک تر است. برای استفاده از کتابخانه، کافیه فایل CSS را وارد کنید یا به واسطه Jquery ازش استفاده کنید.

برای دانستن نوع حرکت هرکدام از افکت ها در سایت کافیه پس از کلیک بر روی هرکدام از اسامی قرار گرفته در دسته بندی، نگاهی به آیکونه موشک در بالای صفحه بی‌اندازید. از نظر تعداد و تنوع در دسته بندی سایته Magic Animations از سایت Hover.css بیشتر است، همچنین کد‌های هرکدام از افکت ها در دسترس قرار دارد.

نحوه اجرا:

//set timer to 5 seconds, after that, load the magic animation
function myFunction() {
    const selector = document.querySelector('.yourdiv')
    selector.classList.add('magictime', 'puffIn')
}
setTimeout(myFunction, 5000);

• اندازه فایل کتابخانه: 60 کیلوبایت
• لایسنس: MIT
• زبان های استفاده شده: CSS – JavaScript

برای اضافه کردن هرکدام از کتابخانه‌ های انیمیشن CSS به پروژه خود می‌توانید از طریق پکیج منیجیر npm و yarn وارد عمل شوید یا لینک CDN کتابخانه را در قسمت head سایت اضافه کنید.

برای مثال:

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>

اگر تجربه کار با کتابخانه‌ های انیمیشن CSS را دارید، در قسمت دیدگاه ها نظر خود را با دیگر کاربران به اشتراک بگذارید. همچنین در قسمت دیدگاه می توانید سوالات مربوط به این مقاله را بپرسید تا کارشناسان ما در کوتاه ترین زمان پاسخگوی شما باشند. از این که تا انتهای این آموزش همراه ما بودید سپاسگزاریم.