‏EaseMotion CSS: انیمیشن بدون build step

تو مستندات این پروژه اومده که EaseMotion CSS یه فریم‌ورک CSS انیمیشن‌محوره و هدفش اینه که اسم کلاس‌ها شبیه جمله‌ی انگلیسی ساده باشه. کافیه یه فایل CSS رو با link به صفحه وصل کنی و بعدش کلاس‌هایی مثل ease-fade-in، ease-slide-up و ease-hover-grow رو روی المان‌ها بذاری. نه build step می‌خواد، نه فایل config، نه وابستگی. یعنی می‌تونی توی یه فایل HTML خالی هم ازش استفاده کنی.

نمونه‌ی کارکردش تو مستندات اینطوریه:

<div class="ease-center ease-fade-in">
  <h1 class="ease-slide-up ease-delay-100">Build faster.</h1>
  <p class="ease-slide-up ease-delay-200">Animation-first CSS for humans.</p>
</div>

کلاس‌های ease-delay-100 و ease-delay-200 تأخیر شروع انیمیشن رو کنترل می‌کنن، پس بدون یه خط جاوااسکریپت می‌شه المان‌ها رو پشت سر هم وارد صفحه کرد.

از نظر عدد و رقم، پروژه بیش از ۸۰ کلاس ابزاری و ۲۰ کلاس انیمیشن داره، به‌علاوه‌ی دکمه با ۶ حالت و کارت با ۱۳ حالت. شخصی‌سازی از راه بیش از ۶۰ متغیر CSS (همون custom property ها، یعنی متغیرهایی که خودت مقدارشون رو عوض می‌کنی) انجام می‌شه. حجم کل بسته ۲۸.۲ کیلوبایت فشرده و ۱۷۴.۱ کیلوبایت خامه، لایسنسش MIT هست و از طریق jsDelivr، unpkg یا npm install easemotion-css نصب می‌شه.

یه نکته‌ی ریز ولی کاربردی: انیمیشن‌های حلقه‌ای مثل ease-bounce و ease-pulse به‌صورت پیش‌فرض بی‌نهایت بار تکرار می‌شن، ولی با یه متغیر می‌شه جلوشون رو گرفت:

:root {
  --ease-animation-iterations: 3;
}

برای کسایی که با فریم‌ورک کار می‌کنن، چون خروجی فقط CSS خالصه، با Next.js (هم App Router هم Pages Router) و Vue و Svelte و Astro بدون دردسر کار می‌کنه. برای React هم یه کامپوننت Animate جدا ارائه شده که تنظیمات انیمیشن رو به prop تبدیل می‌کنه، مثل type، delay و hover. مرورگرهای پشتیبانی‌شده Chrome 49+، Firefox 31+، Safari 9.1+، Edge 15+ و Opera 36+ هستن و از IE هیچ پشتیبانی‌ای نیست.

نکات کلیدی:

• حجم بسته: ۲۸.۲ کیلوبایت فشرده و ۱۷۴.۱ کیلوبایت خام، با لایسنس MIT
• بیش از ۸۰ کلاس ابزاری، ۲۰ کلاس انیمیشن و ۶۰ متغیر CSS برای شخصی‌سازی
• متغیر --ease-animation-iterations تعداد تکرار انیمیشن‌های حلقه‌ای رو کنترل می‌کنه (پیش‌فرض: infinite)
• کامپوننت Animate در React انیمیشن رو به prop هایی مثل type و delay تبدیل می‌کنه
• نصب از CDN (jsDelivr یا unpkg) یا با npm install easemotion-css، بدون هیچ build step ای