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

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

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

تمرکز این فهرست بر کتابخانه‌هایی است که ساده، قدرتمند، قابل تنظیم و مناسب استفاده در پروژه‌های کوچک و بزرگ هستند.

Animista

Animista یک کتابخانه کاربردی و بسیار آسان برای استفاده از انیمیشن‌های CSS به صورت on-demand است. این ابزار مجموعه‌ای بزرگ از انیمیشن‌های آماده ارائه می‌دهد که در بخش‌های مختلف جریان توسعه قابل استفاده‌اند. استفاده از Animista نیاز به نصب یا وابستگی خارجی ندارد.

برای استفاده از هر انیمیشن کافی است وارد Playground شویم، انیمیشن موردنظر را انتخاب کنیم و کلاس و keyframe مربوط به آن را دریافت نماییم. تمام خروجی‌ها CSS هستند.

انیمیشن‌های موجود در گروه‌های زیر قرار گرفته‌اند:

• Basic
• Entrances
• Exits
• Text
• Attention
• Background

هر دسته شامل انیمیشن‌هایی مناسب همان کاربرد است.

برای مثال:

• در گروه Entrances نمونه‌هایی مانند bounce-in یا roll-in قرار دارند که برای ورود المنت‌ها به صفحه استفاده می‌شوند.
• در گروه Attention افکت‌هایی مانند jello و wobble ارائه شده‌اند که برای ایجاد جلب توجه یا تاکید کاربرد دارند.

پیاده‌سازی

فرض کنید قصد داریم از انیمیشن rotate-in در دسته Entrances استفاده کنیم. ابتدا وارد Playground شده و کد مربوط به آن را از بخش سمت راست صفحه دریافت می‌کنیم.

در این مثال، از یک اپلیکیشن React همراه با Vite استفاده می‌کنیم؛ اما این روش در هر محیط توسعه‌ای قابل استفاده است.

۱. افزودن کد انیمیشن

کد خروجی Animista را در فایل CSS پروژه قرار می‌دهیم.

.rotate-in-center {
  -webkit-animation: rotate-in-center 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    both;
  animation: rotate-in-center 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes rotate-in-center {
  0% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}
@keyframes rotate-in-center {
  0% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

۲. استفاده از انیمیشن در پروژه

با توجه به این‌که Animista تنها یک کلاس و یک keyframe ارائه می‌دهد، برای اجرای انیمیشن هنگام کلیک یا هر تعامل دیگر، کافی است کلاس مربوطه را به المنت اضافه کنیم. برای نمونه می‌توان یک دکمه داشت که با کلیک روی آن یک عنصر انیمیت شود:

import { useState } from "react";
import "./App.css";

function App() {
  const [animate, setAnimate] = useState(false);

  const handleClick = () => {
    setAnimate(true);
    setTimeout(() => setAnimate(false), 1000); // match animation duration
  };

  return (
    <>
    <h2 className={animate ? "rotate-in-center" : ""}>Animate me</h2>
    <button onClick={handleClick}>Animate</button>
    </>
  );
}

export default App;

کاربردهای پیشنهادی

با توجه به تنوع انیمیشن‌ها و عدم نیاز به نصب، Animista گزینه‌ای عالی برای:

• پروژه‌های کوچک و سریع
• توسعه‌دهندگانی که نمی‌خواهند یک پکیج npm اضافی به پروژه اضافه کنند
• موقعیت‌هایی که نیاز به یک انیمیشن ساده و سریع داریم
• Productهایی که می‌خواهیم سبک و بدون وابستگی باقی بمانند

سازگاری با فریم‌ورک‌هاسازگاری با فریم‌ورک‌ها

از آنجا که Animista از CSS خالص و keyframe‌های native استفاده می‌کند، تقریباً با تمام فریم‌ورک‌های جاوااسکریپت مانند React، Vue، Svelte، Next.js و… سازگار است.

Animate CSS

Animate.css یکی از مشهورترین و قابل سفارشی‌سازی‌ترین کتابخانه‌های انیمیشن CSS است. این کتابخانه هم از طریق npm و هم از طریق CDN قابل استفاده است. در صفحه اصلی آن می‌توانیم داکیومنت اصلی و لیست کامل کلاس‌های انیمیشن را مشاهده کنیم.

افزودن انیمیشن با Animate.css بسیار ساده است:

1. المنت موردنظر را با کلاس پایه animate__animated مشخص می‌کنیم.
2. سپس نام انیمیشن موردنظر را به آن اضافه می‌کنیم، مانند: animate__bounce

پیاده‌سازی

فرض کنید قصد داریم Animate CSS را در یک اپلیکیشن React ساخته شده با Vite استفاده کنیم. پس از نصب پکیج، کافی است در فایل main.jsx خط زیر را اضافه کنیم:

import 'animate.css';

اکنون می‌توانیم انیمیشن‌های موردنظر را مستقیماً روی المنت‌های پروژه اعمال کنیم. تنها کافی است قطعه کد ارائه شده را به پروژه اضافه کرده و اپلیکیشن را اجرا کنیم. با این کار انیمیشن به‌صورت کامل و بدون نیاز به تنظیمات اضافی اجرا خواهد شد:

import { useState } from "react";
import "./App.css";

function App() {
  const [animate, setAnimate] = useState(false);

  const handleClick = () => {
    setAnimate(true);
    setTimeout(() => setAnimate(false), 1000); // match animation duration
  };

  return (
    <>
    <h2 className={animate ? "animate__animated animate__bounce" : ""}>
        Animate me
    </h2>
    <button onClick={handleClick}>Animate</button>
    </>
  );
}

export default App;

کاربردهای پیشنهادی

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

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

سازگاری با فریم‌ورک‌ها

Animate CSS تقریباً با تمامی فریم‌ورک‌های جاوااسکریپت سازگار است. در مستندات رسمی از ویژگی HTML یعنی class استفاده می‌شود، اما در فریم‌ورک‌هایی مانند React باید این ویژگی را به className تغییر دهیم.

اگر هنگام استفاده در فریم‌ورک‌های مختلف به چنین تفاوت‌های جزئی توجه کنیم، Animate CSS در هر محیط توسعه‌ای بدون مشکل عمل خواهد کرد.

AnimXYZ

AnimXYZ یک فریم‌ورک پیشرفته برای انیمیشن‌سازی مبتنی بر CSS است که قابلیت سفارشی‌سازی بسیار گسترده و ترکیب‌پذیری بالایی ارائه می‌دهد. این کتابخانه از فریم‌ورک‌های محبوبی مانند React و Vue پشتیبانی مستقیم دارد و مستندات آن نیز با انیمیشن‌هایی چشم‌نواز همراه شده است.

AnimXYZ امکان تعریف و اجرای توالی‌های انیمیشن پیچیده را فراهم می‌کند. هسته اصلی این کتابخانه بر پایه یک انیمیشن مبتنی بر @keyframes قرار دارد که با کمک CSS variables قابل سفارشی‌سازی است.

متغیرهای xyz کنترل مواردی مانند مدت زمان، opacity، transform و رفتار ورود (enter) یا خروج (exit) المنت‌ها را بر عهده دارند. همین ساختار باعث می‌شود بتوانیم انیمیشن‌های بسیار خاص و دقیق ایجاد کنیم.

پیاده‌سازی

AnimXYZ برای React و Vue فرآیند نصب مشخصی دارد. در این بخش از یک پروژه React ساخته شده با Vite استفاده می‌کنیم تا نحوه راه‌اندازی آن را بررسی کنیم.

پس از نصب پکیج از طریق npm، کافی است خط زیر را در فایل main.jsx اضافه کنیم تا AnimXYZ در پروژه فعال شود:

import "@animxyz/core";

سپس باید محتوای زیر را در فایل App.jsx قرار دهیم:

import { useState } from "react";
import "./App.css";

function App() {
  const [key, setKey] = useState(0);

  const handleClick = () => {
    setKey((prev) => prev + 1); // trigger re-render with new key
  };

  return (
    <>
    <button onClick={handleClick}>Animate</button>
    <div key={key} className="xyz-in" xyz="fade up big">
        I will animate in!
    </div>
    </>
  );
}

export default App;

کاربردهای پیشنهادی

AnimXYZ برای پروژه‌های کوچک و بزرگ مناسب است.

در پروژه‌های بزرگ، توانایی بالای کتابخانه برای شخصی‌سازی باعث می‌شود تقریباً هر نوع انیمیشن قابل تصور، قابل پیاده‌سازی باشد. در پروژه‌های کوچک نیز ساختار ساده و API سرراست آن موجب می‌شود توسعه‌دهندگان بدون شیب یادگیری زیاد بتوانند به‌سرعت از آن استفاده کنند.

سازگاری با فریم‌ورک‌ها

AnimXYZ پشتیبانی رسمی و مستقیم برای React و Vue ارائه می‌دهد. با این حال، نسخه core کتابخانه در هر پروژه مبتنی بر جاوااسکریپت قابل استفاده است، زیرا اجرای آن به vanilla JS وابسته است.

در نتیجه، هر تیم توسعه که با اکوسیستم جاوااسکریپت آشنا باشد می‌تواند از AnimXYZ به‌عنوان یک ابزار قدرتمند انیمیشن‌سازی استفاده کند.

Whirl

Whirl یک کتابخانه ساده اما کاربردی برای ایجاد انیمیشن‌های لودینگ است. همان‌طور که می‌دانیم، کوچک‌ترین جزئیات در تجربه کاربری اهمیت دارند و وجود یک انیمیشن بارگذاری شیک و حرفه‌ای می‌تواند حس کیفیت یک web App را به‌طور چشم‌گیری افزایش دهد.

در صفحه اصلی وب‌سایت Whirl مجموعه‌ای از انیمیشن‌های لودر ارائه شده است که امکان تست تک‌تک آن‌ها وجود دارد. دکمه Lucky Dip! نیز یک انیمیشن تصادفی نمایش می‌دهد.

این کتابخانه فاقد نیاز به نصب است و تمام انیمیشن‌ها با CSS خالص پیاده‌سازی شده‌اند. با کلیک روی گزینه Grab the CSS on GitHub! می‌توانیم کد موردنیاز را مستقیماً دریافت کنیم و بلافاصله در پروژه قرار دهیم.

پیاده‌سازی

فرض کنید یک اپلیکیشن React با استفاده از Vite ایجاد کرده‌ایم. تنها کاری که لازم است انجام دهیم این است که کد مربوطه را از لینک ارائه شده در مستندات کپی کنیم.

سپس این کد را داخل فایل App.css قرار می‌دهیم. بعد از آن می‌توانیم یک کامپوننت ساده بسازیم و className rainbow را به آن اختصاص دهیم. با اجرای پروژه، انیمیشن لودینگ فوراً قابل مشاهده خواهد بود.

import "./App.css";

function App() {
  return (
    <>
    <div className="rainbow"></div>
    </>
  );
}

export default App;

کاربردهای پیشنهادی

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

Whirl بهترین انتخاب برای تیم‌ها یا توسعه‌دهندگانی است که می‌خواهند بدون پیچیدگی و با حداقل تنظیمات، تجربه کاربری پروژه را با یک لودر حرفه‌ای ارتقا دهند.

سازگاری با فریم‌ورک‌ها

Whirl چون تنها با CSS خالص کار می‌کند، عملاً با تمام فریم‌ورک‌های جاوااسکریپتی سازگار است. تنها باید به تفاوت‌های کوچک بین فریم‌ورک‌ها توجه کرد؛ برای مثال در React، به جای ویژگی class باید از className استفاده شود.

اگر این تفاوت‌های جزئی رعایت شوند، Whirl بدون هیچ مشکلی در هر محیط توسعه‌ای قابل استفاده خواهد بود.

Moving Letters

Moving Letters یک کتابخانه انیمیشن‌سازی مبتنی بر CSS است که تمرکز اصلی آن بر ایجاد انیمیشن‌های متنی است. این کتابخانه در پشت صحنه از Anime.js استفاده می‌کند.

اگرچه امکان استفاده از انیمیشن‌ها روی المنت‌های دیگر هم وجود دارد، اما طبیعی‌ترین و بهترین خروجی زمانی به دست می‌آید که از آن برای انیمیشن‌سازی روی متن استفاده شود.

برای استفاده از Moving Letters نیازی به نصب هیچ پکیجی نیست. در این بخش، از یک پروژه Vanilla JS ساخته‌شده با Vite استفاده می‌کنیم.

در سایت رسمی، با انتخاب هر انیمیشن، سیستم پیش نمایش و کد HTML،CSS و جاوااسکریپت مربوط به آن را نمایش می‌دهد و ما می‌توانیم همان کدها را مستقیماً استفاده کنیم.

پیاده‌سازی

برای راه‌اندازی Moving Letters، کافی است مراحل زیر را انجام دهیم:

1. یک پروژه Vanilla JS با استفاده از Vite ایجاد کنیم.
2. به صفحه انیمیشن موردنظر در Moving Letters مراجعه کرده و کد HTML، CSS و جاوااسکریپت ارائه شده را کپی کنیم.
3. کد HTML را در فایل index.html پروژه قرار دهیم.
4. بخش استایل را در فایل CSS اصلی پروژه (یا هر فایل استایل معادل) کپی کنیم.
5. اسکریپت انیمیشن و الگوی مرتبط را در فایل main.js قرار دهیم.

با این روش، تمام انیمیشن‌های آماده Moving Letters تنها با یک فایل CSS و یک فایل جاوااسکریپت اجرا می‌شوند و نیازی به نصب پکیج نیست.

کاربردهای پیشنهادی

Moving Letters بهترین گزینه برای انیمیشن‌سازی روی متن است.

استفاده از آن روی سایر المنت‌ها نیز امکان‌پذیر است، اما به‌دلیل نیاز به تنظیمات اضافی، بهترین و طبیعی‌ترین خروجی همان استفاده روی نوشته‌ها، عناوین و تیترهاست.

سازگاری با فریم‌ورک‌ها

Moving Letters نمونه‌های خود را با Vanilla JS می‌سازد و توسعه‌دهندگان می‌توانند به‌راحتی آن‌ها را به React، Vue یا Svelte منتقل کنند.

کافی است ساختار DOM و اسکریپت انیمیشن را مطابق شیوه استاندارد همان فریم‌ورک پیاده‌سازی کنیم. بنابراین نبود پشتیبانی native مانعی برای استفاده از این کتابخانه در پروژه‌های مدرن محسوب نمی‌شود.

LDRS

LDRS یک کتابخانه قدرتمند برای ساخت لودرها و اسپینرهای مبتنی بر CSS است. این کتابخانه هم از طریق npm و هم توسط CDN قابل استفاده بوده و مجموعه‌ای از لودرهای سبک، زیبا و قابل سفارشی‌سازی ارائه می‌دهد. LDRS علاوه‌بر پشتیبانی مستقیم از HTML/CSS، برای React نیز نسخه رسمی دارد.

با انتخاب هر لودر، سایت یک کامپوننت مجزا نمایش می‌دهد که شامل پیش‌نمایش، سورس کد و تنظیمات شخصی‌سازی آن است.

پس از اعمال تنظیمات، کافی است کد نهایی را کپی کرده و در پروژه قرار دهیم.

پیاده‌سازی

در پروژه React ساخته شده با Vite، ساختار فایل App.jsx را مطابق نمونه پیشنهادی LDRS تنظیم می‌کنیم و با قرار دادن کامپوننت لودر در فایل، نتیجه را اجرا می‌کنیم.

import React from "react";
import { Hourglass } from "ldrs/react";
import "ldrs/react/Hourglass.css";
import "./App.css";

const App = () => {
  return (
    <div>
    {/* // Default values shown */}
    <Hourglass size="40" bgOpacity="0.1" speed="1.75" color="blue" />
    </div>
  );
};

export default App;

کاربردهای پیشنهادی

LDRS گزینه‌ای ایده‌آل برای ساخت لودرها و اسپینرهای سبک و سریع است. این کتابخانه برای نمایش لودینگ‌های بین صفحات یا انتظار در ارسال درخواست‌های API، انیمیشن‌های کم‌حجم، روان و حرفه‌ای ارائه می‌دهد.

سازگاری با فریم‌ورک‌ها

LDRS به صورت رسمی از React پشتیبانی می‌کند. با این حال، به دلیل اتکا به CSS خالص و ساختار ساده، استفاده از آن در سایر فریم‌ورک‌های جاوااسکریپتی مانند Vue، Svelte یا حتی پروژه‌های Vanilla JS نیز بدون هیچ محدودیتی امکان‌پذیر است.

جمع‌بندی

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