‏انیمیشن با CSS سریع‌تره یا جاوااسکریپت؟

نویسنده می‌گه یکی از رایج‌ترین سوالا درباره کارایی انیمیشن اینه که آیا انیمیشن‌های جاوااسکریپتی از CSS کندترن یا نه، و آیا همیشه باید سراغ transition و keyframe خود CSS بریم. به نظرش این موضوع ظرافت داره و باور رایج کاملاً درست نیست. واسه همین یه انیمیشن ساده توپ جهنده رو هم با CSS و هم با جاوااسکریپت پیاده می‌کنه تا فرقشون رو نشون بده.

نسخه CSS با یه keyframe ساده نوشته می‌شه که توپ رو با transform: translateX جابه‌جا می‌کنه:

@keyframes bounce {
  to {
    transform: translateX(calc(var(--bounce-magnitude) * -1));
  }
}

.ball {
  --bounce-magnitude: 200px;
  animation: bounce 1000ms infinite alternate;
}

نسخه جاوااسکریپتی ساده هم با requestAnimationFrame هر فریم (حدود ۶۰ بار در ثانیه) تابع animate رو صدا می‌زنه و مقدار transform رو دستی ست می‌کنه:

function animate() {
  const elapsedTime = performance.now() - startTime;
  // محاسبه x بر اساس زمان سپری‌شده
  ball.style.transform = `translateX(${x}px)`;
  window.requestAnimationFrame(animate);
}

حالا سوال اینه کدوم نرم‌تر اجرا می‌شه؟ شهود اکثر ما می‌گه CSS، و درسته، ولی نویسنده می‌گه دلیلش اون چیزی نیست که فکر می‌کنیم. خیلیا فکر می‌کنن جاوااسکریپت چون باید هر فریم x رو حساب کنه یا چون «پل» بین جاوااسکریپت و DOM هزینه داره کنده؛ ولی موتورهای مدرن مرورگر این کارا رو تو کسری از یه میلی‌ثانیه انجام می‌دن، خیلی سریع‌تر از اونی که روی نرخ فریم اثر بذاره.

فرق اصلی یه چیز دیگه‌ست: نسخه جاوااسکریپت روی ترد اصلی (main thread) اجرا می‌شه، کنار هر چیز دیگه‌ای که تو برنامه داره اتفاق می‌افته. ولی transition و keyframe های CSS روی یه ترد جدا می‌چرخن، پس وقتی جاوااسکریپت مشغوله مختل نمی‌شن. نویسنده می‌گه تو اپ‌های مدرن ترد اصلی کلی کار داره؛ مثلاً React مدام DOM رو آپدیت می‌کنه و هر fetch باید روی همون ترد پارس بشه. واسه همینه که گاهی یه اسپینر یه لحظه فریز می‌شه.

اما یه نکته جالب: هم Motion (همون Framer Motion سابق) و هم GSAP جاوااسکریپتی‌ان، ولی Motion حتی وقتی ترد اصلی مشغوله انیمیشن رو نرم نگه می‌داره. رازش اینه که Motion زیر کاپوت از Web Animations API (WAAPI) استفاده می‌کنه که به همون موتور سطح‌پایین انیمیشن CSS وصله، پس می‌تونه روی ترد جدا اجرا بشه. نویسنده منصفانه می‌گه GSAP انتخاب اشتباهی نکرده، فقط امکاناتی داره که شاید با WAAPI سازگار نیستن و یه trade-off دیگه رو انتخاب کرده.

جمع‌بندی نویسنده اینه که خودش هر جا بتونه از انیمیشن و transition بومی CSS استفاده می‌کنه و فقط وقتی CSS کم میاره سراغ کتابخونه‌ای مثل Motion می‌ره. به گفته‌ش CSS این روزا اونقدر قوی شده که با APIهای جدیدی مثل View Transitions و linear() و Animation Timeline خیلی کارا رو بدون جاوااسکریپت می‌شه انجام داد.

نکات کلیدی:

• انیمیشن CSS سریع‌تر حس می‌شه نه چون محاسبه‌ش کمتره، بلکه چون روی ترد جدا اجرا می‌شه
• جاوااسکریپت ساده با requestAnimationFrame روی ترد اصلی می‌چرخه و با بقیه برنامه رقابت می‌کنه
• کتابخونه Motion با Web Animations API همون مزیت ترد جدا رو برای جاوااسکریپت میاره
• توصیه نویسنده: اول CSS بومی، و فقط وقتی کم آورد یه کتابخونه مثل Motion