tailwindcss-motion؛ انیمیشن ساده برای Tailwind CSS
فرانتاند
جاوااسکریپتخلاصهٔ کاملتر
پروژهٔ tailwindcss-motion از تیم Rombo یه کتابخونهٔ انیمیشن برای Tailwind CSS هست که با یه سینتکس ساده و کلاسمحور کار میکنه — همون منطقی که خود Tailwind برای استایل داره، اینبار برای حرکت. متنبازه و با لایسنس MIT منتشر شده. شعارش هم همینه: انیمیشن بدون شلوغکاری.
نصبش یه پکیج توسعهست (npm i -D tailwindcss-motion) و بعدش فقط کافیه پلاگین رو تو کانفیگ Tailwind ثبت کنی:
// tailwind.config.js
export default {
theme: {
extend: {},
},
plugins: [require('tailwindcss-motion')],
};از اون به بعد انیمیشنها همون کلاسهای معمولیان. پریستهای آماده کارهای رایج رو یهخطی میکنن — مثل motion-preset-bounce، motion-preset-seesaw و motion-preset-typewriter-[24] — و کنارشون یوتیلیتیهای ریزتری هست برای جابهجایی و چرخش، مثل motion-translate-x-in-100، motion-translate-y-in-75 و motion-rotate-in-[0.5turn].
تیم سازنده روی سه ادعا تأکید میکنه: رابط ساده ولی تنظیمات بینهایت، دسترسیپذیری بهصورت پیشفرض، و کارایی تستشده. به گفتهٔ اونها دیگه لازم نیست نگران سازگاری مرورگر، محاسبهٔ پراپرتیها یا افت فریمریت باشی — اینها از قبل حل شدن.
نکتهٔ دسترسیپذیری تو معرفیشون پررنگه: میگن دسترسیپذیری انیمیشن دیگه یه «خوبه که باشه» نیست و باید پیشفرض باشه. برای وبسایتی که کاربرهاش ممکنه به حرکت زیاد حساس باشن، این پیشفرض بودن مهمتر از تعداد پریستهاست.
بخش جالب دیگه یه انیماتور بصریه که مقادیری مثل مدت زمان، مقیاس، جابهجایی، شفافیت، چرخش و بلور رو با اسلایدر تنظیم میکنی و نتیجه رو زنده میبینی. یه افزونهٔ مرورگر هم دارن که همین انیماتور رو روی سایت خودت یا localhost اجرا میکنه و خروجی رو برای Tailwind CSS، Framer Motion، GSAP و چندتای دیگه بیرون میده.
نکات کلیدی:
- کتابخونهٔ انیمیشن کلاسمحور برای Tailwind CSS، متنباز با لایسنس MIT
- نصب با npm i -D tailwindcss-motion و ثبت پلاگین تو کانفیگ Tailwind
- پریستهای آماده مثل motion-preset-bounce کنار یوتیلیتیهای جابهجایی و چرخش
- دسترسیپذیری پیشفرض و بهینهسازی کارایی از ادعاهای اصلی سازندهها
- انیماتور بصری و افزونهٔ مرورگر با خروجی برای Tailwind، Framer Motion و GSAP
