جدول Waypoint طويل: يومان، وأربعة مسارات، وستون جلسة. يريد الفريق لمستين صغيرتين: شريط تقدّم رفيع تحت الرأس يبيّن إلى أين وصلت في الجدول، وبطاقات متحدّثين تنساب إلى مجال الرؤية حين تصل إليها بالتمرير. الطريقة القديمة كانت مستمعًا لحدث scroll يقرأ scrollY، ويجري بعض الحسابات، ويكتب الأنماط، ستين مرة في الثانية، على الـ main thread، متنافسًا مع كل ما عداه.
الحركات المرتبطة بالتمرير (scroll-driven animations) تترك هذا العمل لـ CSS. تكتب حركة @keyframes عادية وتستبدل ساعتها: بدل الزمن، يأتي تقدّمها من التمرير.
خط زمن تقدّم التمرير، scroll()، يمضي من 0% إلى 100% بينما تُمرَّر حاوية التمرير من الأعلى إلى الأسفل. scroll(root) هي المستند؛ وscroll(nearest)، وهي الافتراضية، أقرب سلف قابل للتمرير.
خط زمن تقدّم الظهور، view()، يتتبّع عنصرًا واحدًا وهو يعبر المنطقة المرئية من حاوية التمرير (الـ scrollport): من لحظة ظهور حافته من الأسفل إلى لحظة مغادرته من الأعلى.
@keyframes grow {\n from { scale: 0 1; }\n to { scale: 1 1; }\n}\n\n.progress {\n position: fixed;\n inset: 0 0 auto;\n height: 3px;\n background: var(--track-design);\n transform-origin: 0 50%;\n animation: grow linear both;\n animation-timeline: scroll(root);\n}في أعلى الصفحة يكون حجم الشريط صفرًا؛ وفي أسفلها يمتدّ بالعرض الكامل؛ وفي أيّ موضع بينهما يكون متناسبًا تمامًا. وlinear مهمة هنا: مع ease الافتراضية سيندفع الشريط في المنتصف ويزحف عند الطرفين. وboth تُبقي أول keyframe وآخرها مطبّقين خارج النطاق.
لبطاقات المتحدّثين، خط زمن الظهور هو الساعة المناسبة، وanimation-range تختار أيّ جزء من مسار البطاقة يشغّل الحركة:
@keyframes reveal {\n from { opacity: 0; translate: 0 24px; }\n to { opacity: 1; translate: 0 0; }\n}\n\n.speaker {\n animation: reveal linear both;\n animation-timeline: view();\n animation-range: entry 0% cover 30%;\n}النطاقات المسمّاة تصف مسار العنصر: entry وهو يعبر الحافة السفلية، وcontain وهو داخل المنطقة بالكامل (أو يغطّيها بالكامل إن كان أطول منها)، وexit وهو يعبر الحافة العلوية، وcover للرحلة كلها من أول بكسل يدخل إلى آخر بكسل يخرج. وentry 0% cover 30% تعني «ابدأ حين تبدأ البطاقة بالدخول، وانتهِ حين تقطع 30% من رحلتها الكاملة»، فتكون كل بطاقة ظاهرة بالكامل قبل وقت كافٍ من وصول المستخدم إليها.
هذه صورة الدعم في أكتوبر 2026: الحركات المرتبطة بالتمرير موجودة في Chromium منذ الإصدار 115 (2023) وفي Safari منذ الإصدار 26 (سبتمبر 2025). ولدى Firefox تطبيق خلف إعداد تجريبي (flag)، وهي من مجالات التركيز في Interop 2026، لكن نسخة Firefox المستقرة لا تدعمها بعد، لذا فالميزة ليست ضمن Baseline.
\nوهذا يحدّد طريقة كتابتك لها. الـ keyframes الخاصة بالظهور تبدأ من opacity: 0، وفي متصفّح يفهم animation-timeline لا مشكلة في ذلك. أما في متصفّح لا يفهمها، فإن animation: reveal linear both بلا خط زمن حركة زمنية بمدة صفر تنتهي عند آخر keyframe، فتظل البطاقات ظاهرة. لكن لا تعتمد على هذه الدقيقة الخفيّة؛ اجعل النيّة صريحة:
@supports (animation-timeline: view()) {\n @media (prefers-reduced-motion: no-preference) {\n .speaker {\n animation: reveal linear both;\n animation-timeline: view();\n animation-range: entry 0% cover 30%;\n }\n }\n}المتصفّحات غير الداعمة ومستخدمو تقليل الحركة يحصلون على الشبكة العادية الظاهرة بالكامل. والمتصفّحات الداعمة تحصل على الظهور التدريجي.
\n\nوتستطيع أيضًا تسمية خطوط الزمن (view-timeline-name: --speaker) ليتبعها عنصر آخر، واستخدام timeline-scope لجعل الاسم مرئيًا في مستوى أعلى من الشجرة. الجأ إلى ذلك حين يجب أن يقود موضع تمرير عنصر ما عنصرًا آخر؛ أما للتأثيرات المكتفية بذاتها، فتكفي scroll() وview() بلا أسماء.
في التمرين أضف شريط تقدّم القراءة والظهور التدريجي للمتحدّثين، بالترتيب الصحيح، ومحميّين بـ @supports. تقرأ الفحوصات خطوط الزمن والنطاقات المحسوبة. وبعدها ستتراجع خطوة عن التأثيرات المنفردة لتنظّم ملف الأنماط كله بحيث يستطيع فريق أن يعمل عليه.
animation-timeline: scroll() تربط تقدّم الحركة بمقدار ما مُرِّرت حاوية التمرير؛ وview() تربطه بمرور عنصر عبر المنطقة المرئية.","animation-range تختار أيّ جزء من خط الزمن يشغّل الحركة، مثل entry 0% cover 30% لظهور تدريجي ينتهي بعد قليل من ظهور العنصر.","الاختصار animation يعيد ضبط animation-timeline، لذا أعلن خط الزمن بعد الاختصار.","الحركات المرتبطة بالتمرير تعمل في Chromium وSafari 26 لكن ليس في نسخة Firefox المستقرة بعد، لذا غلّفها في @supports وتأكّد من أن المحتوى ظاهر بالكامل دونها."],"further":[{"title":"Scroll-driven animation timelines (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines"},{"title":"animation-timeline (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-timeline"},{"title":"animation-range (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-range"}],"quiz":[{"q":"شريط التقدّم لا يتحرّك أبدًا. لماذا؟
\n.progress {\n animation-timeline: scroll(root);\n animation: grow linear both;\n}scroll(root) غير صالحة؛ يجب أن تكون scroll(html).","why":"root هي الكلمة المفتاحية الصحيحة لحاوية تمرير المستند؛ وhtml غير مقبولة هناك."},{"text":"الاختصار animation يأتي ثانيًا فيعيد ضبط animation-timeline إلى auto، فتعمل الحركة على الزمن بلا مدة.","why":"صحيح. الاختصار يعيد ضبط كل خصائص الحركة المفصّلة، بما فيها خط الزمن. ضع animation-timeline بعده."},{"text":"الحركات المرتبطة بالتمرير تحتاج إلى animation-duration: 1s.","why":"المدة لا تنطبق على خطوط زمن التمرير؛ التقدّم يأتي من موضع التمرير. وauto مناسبة."}],"answer":1},{"q":"يجب أن تظهر بطاقة متحدّث تدريجيًا وهي تدخل الـ viewport، وأن تكون ظاهرة بالكامل حين يظهر 30% منها. أيّ التصريحات تحقّق ذلك؟
","options":[{"text":"animation-timeline: scroll(); animation-range: 0% 30%;","why":"خط زمن scroll() يتتبّع موضع تمرير الصفحة كلها، فيشير النطاق إلى أول 30% من الصفحة، لا إلى البطاقة."},{"text":"animation-timeline: view(); animation-range: exit 0% exit 30%;","why":"نطاق exit هو حين تغادر البطاقة الـ viewport، أي الطرف المقابل من مسارها."},{"text":"animation-timeline: view(); animation-range: entry 0% cover 30%;","why":"صحيح. view() تتتبّع ظهور البطاقة، والنطاق يبدأ حين تبدأ بالدخول وينتهي عند 30% من نطاق cover الكامل."}],"answer":2},{"q":"في 2026، يريد زميلك إخفاء شبكة المتحدّثين حتى تُظهر الحركات المرتبطة بالتمرير كل بطاقة تدريجيًا. ما الخطر الرئيسي؟
","options":[{"text":"في المتصفّحات التي لا تدعم خطوط زمن التمرير، مثل نسخة Firefox المستقرة، قد لا تظهر أبدًا بطاقة تبدأ بـ opacity صفر.","why":"صحيح. الحركات المرتبطة بالتمرير ليست ضمن Baseline بعد. ضع حالة البداية المخفية داخل@supports (animation-timeline: view()) لتعرض المتصفّحات غير الداعمة البطاقات بشكل طبيعي."},{"text":"الحركات المرتبطة بالتمرير تحجز الـ main thread دائمًا وتسبّب تقطّعًا.","why":"حركات الخصائص الملائمة للـ compositor مثل opacity وtransform يمكن أن تعمل خارج الـ main thread؛ وهذه إحدى مزاياها على مستمعات التمرير."},{"text":"قارئات الشاشة تعلن كل إطار من الحركة.","why":"قارئات الشاشة لا تعلن إطارات الحركة البصرية."},{"text":"كل بطاقة تحتاج إلى خط زمن مسمّى خاص بها.","why":"خط زمن view() المجهول الاسم خاص بكل عنصر تلقائيًا؛ والأسماء لا تلزم إلا لمشاركة خط زمن بين عناصر."}],"answer":0}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"\nالـ keyframes grow وreveal جاهزة. اربطها بالتمرير:
grow على خط زمن تمرير المستند، بتوقيت linear وبنمط تعبئة يُبقي الـ keyframes مطبّقة (both)..speaker تشغّل reveal على خط زمن ظهورها، من بداية نطاق entry إلى 30% من نطاق cover.@supports (animation-timeline: view()) لتعرض المتصفّحات غير الداعمة الصفحة العادية. (ويُنصح بتغليفها أيضًا في prefers-reduced-motion: no-preference.)animation: reveal linear both; ثم animation-timeline: view(); وanimation-range: ….","@supports (animation-timeline: view()) { .progress { animation: grow linear both; animation-timeline: scroll(root); } .speaker { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; } }"],"explanation":"لم يكن شريط البداية يتحرّك لأن الاختصار animation جاء بعد animation-timeline فأعاد ضبطها إلى auto، تاركًا حركة زمنية بطول صفر. إعلان خط الزمن بعد الاختصار يربط grow بحاوية تمرير الجذر، وlinear تُبقي الشريط متناسبًا مع مسافة التمرير. وخط زمن view() المجهول الاسم لكل متحدّث يتتبّع تلك البطاقة عبر الـ viewport، وentry 0% cover 30% تجعل الظهور ينتهي بعد قليل من ظهور البطاقة. وحماية @supports تُبعد الظهور التدريجي عن المتصفّحات التي لا تستطيع تشغيله، مثل نسخة Firefox المستقرة في 2026، حيث تبقى البطاقات ظاهرة ببساطة.