‏شروع انیمیشن با اسکرول، فقط با CSS

نویسنده تو این مقاله قابلیت جدید scroll-triggered animations تو CSS رو توضیح می‌ده. این قابلیت مشخصات رسمی W3C داره، از نسخهٔ ۱۴۶ تو Chromium در دسترسه و کاندیدای Interop 2027 هست. قبلاً برای این‌که یه المنت موقع ورود به صفحه انیمیشن بخوره، باید با جاوااسکریپت و IntersectionObserver یه کلاس مثل .is-visible اضافه می‌کردیم. حالا همین کار فقط با CSS انجام می‌شه.

فرقش با scroll-driven مهمه. تو scroll-driven پیشرفت انیمیشن به اسکرول وصله؛ ۵۰ درصد اسکرول کنی، انیمیشن ۵۰ درصده و اگه اسکرول رو ول کنی، انیمیشن هم وایمیسه. تو scroll-triggered، اسکرول فقط می‌گه انیمیشن کی شروع بشه و بعدش یه انیمیشن معمولی با زمان خودش (مثلاً 0.6s ease-out) اجرا می‌شه. نویسنده می‌گه برای پارالاکس و نوار پیشرفت خوندن از اولی استفاده کن، برای ورود کارت‌ها و تیترها از دومی.

سینتکس دو تا پراپرتی جدید داره. timeline-trigger روی المنتی که می‌خوای نگاهش کنی یه اسم (شبیه متغیر CSS) و یه بازه تعریف می‌کنه. animation-trigger هم به انیمیشن می‌گه موقع لود اجرا نشه و منتظر اون تریگر بمونه:

.card {
  timeline-trigger: --card-trigger view() entry 100% exit 0%;
  animation: pop-in 0.6s cubic-bezier(0.34, 1.5, 0.64, 1) both;
  animation-trigger: --card-trigger play-forwards play-backwards;
}

بازه‌ها همونایی هستن که تو scroll-driven بودن: entry (ورود المنت از پایین صفحه)، contain (وقتی کامل تو صفحه‌ست)، exit (خروج از بالا) و cover (کل مسیر). entry 100% exit 0% یعنی صبر کن تا المنت کامل وارد صفحه بشه. برای المنت‌های بلندتر از صفحه، contain هیچ‌وقت اتفاق نمی‌افته، برای همین مشخصات entry-crossing و exit-crossing رو هم داره.

برای ورود و خروج می‌شه این اکشن‌ها رو گذاشت: play-forwards، play-backwards، play-once، pause، reset و none. ترکیب محبوب نویسنده play-forwards play-backwards برای بخش‌های برگشت‌پذیر و play-once none برای معرفی یه‌باره‌ست. قراره تو مشخصات اسم enter و exit به activation و deactivation عوض بشه، چون تریگرها بعداً به رویدادهای pointer مثل pointerdown هم گسترش پیدا می‌کنن.

نویسنده تو دموهاش این قابلیت رو با attr() تایپ‌دار (برای خوندن اسم تریگر از اتریبیوت data-trigger) و sibling-index() (برای ساختن تأخیر پله‌ای بدون nth-child) ترکیب کرده. یه نکته هم می‌گه: پراپرتی سفارشی تأخیر باید با @property و نوع ثبت بشه، وگرنه مقدار محاسبه‌نشده به فرزندها می‌رسه. نتیجه‌ش کارت‌هایی هست که هر تعدادشون پشت هم وارد می‌شن، بدون نوشتن دستی هیچ تأخیری.

نکات کلیدی:

• scroll-triggered animations از نسخهٔ ۱۴۶ تو Chromium پشتیبانی می‌شه.
• دو پراپرتی جدید: timeline-trigger برای تعریف تریگر و animation-trigger برای وصل کردن انیمیشن.
• اکشن‌ها: play-forwards، play-backwards، play-once، pause، reset و none.
• برای المنت‌های بلندتر از صفحه، contain کار نمی‌کنه و باید از entry-crossing و exit-crossing استفاده کرد.
• این قابلیت کاندیدای Interop 2027 هست.