{"id":"l-css-4-1","courseId":"css-mastery","lang":"ar","kind":"lesson","summary":"أضف transitions وحركات keyframes تبدو مقصودة، وحرّك العناصر عند ظهورها من display: none باستخدام @starting-style، واحترم prefers-reduced-motion دون أن تكسر الواجهة.","html":"

يطلب موجز التصميم في Waypoint ثلاث لمسات من الحركة: بطاقات الجلسات ترتفع قليلًا عند المرور فوقها، والجلسة الجارية الآن لها نقطة «Live» نابضة، وإشعار منبثق (toast) ينزلق إلى الداخل حين تحفظ جلسة. الثلاث صغيرة. والثلاث يمكن أن تسوء بطرق تجعل الصفحة تبدو رخيصة، أو تُشعر بعض الناس بتعب جسدي حقيقي.

\n

يغطّي هذا الدرس الأدوات (الـ transitions والـ keyframes و@starting-style) والمسؤولية (prefers-reduced-motion).

\n

الـ transitions: بين حالتين

\n

الـ transition (الانتقال) يحرّك خاصية حين تتغيّر قيمتها المحسوبة، لأيّ سبب: مرور المؤشّر، أو تبديل class، أو media query. أنت تختار الخصائص والمدة ومنحنى التسارع (easing):

\n
session-card.css
.session-card {\n  transition:\n    translate 200ms ease-out,\n    box-shadow 200ms ease-out;\n\n  &:hover,\n  &:focus-within {\n    translate: 0 -2px;\n    box-shadow: 0 6px 16px rgb(15 23 42 / 0.12);\n  }\n}
\n

ثلاثة اختيارات تؤدّي العمل هنا. خصائص محدّدة: ترتفع البطاقة ويكبر ظلّها، ولا يتحرّك شيء آخر. مدة قصيرة: من 150 إلى 250ms تبدو مستجيبة لتغييرات الواجهة الصغيرة؛ وما يزيد على 400ms يبدو متثاقلًا حين يكون المستخدم في انتظاره. التسارع: ease-out تبدأ سريعة ثم تستقرّ، وهذا يناسب ما يستجيب للمستخدم.

\n

وخصائص التحويل المنفردة (translate وscale وrotate) تستحق أن تفضّلها على transform: يمكن تحريك كلٍّ منها وتجاوزه باستقلال، فلا يمسح ارتفاع المرور قيمة scale ضُبطت في مكان آخر.

\n\n

الـ keyframes: حركة متعدّدة الخطوات ومتكرّرة

\n

حين يكون للحركة أكثر من خطوتين، أو تتكرّر من تلقاء نفسها، تحتاج إلى @keyframes:

\n
CSS
@keyframes pulse {\n  0%   { scale: 1;   opacity: 1; }\n  70%  { scale: 2.2; opacity: 0; }\n  100% { scale: 2.2; opacity: 0; }\n}\n\n.live-dot::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  background: currentColor;\n  animation: pulse 1.6s ease-out infinite;\n}
\n

هالة النقطة تكبر وتتلاشى، ثم تتوقّف برهة (الثبات من 70% إلى 100%) قبل أن تتكرّر. وتحريك scale وopacity مقصود: هاتان الخاصيتان تستطيعان العمل على الـ compositor دون إعادة تشغيل التخطيط، وهذا ما يشرحه آخر درس في هذه الدورة.

\n

حركات الدخول بـ @starting-style

\n

الإشعار المنبثق للحفظ يكون display: none إلى أن يُظهره class. لا تستطيع الـ transitions أن تعمل عند ظهوره الأول، لأن العنصر المرسوم حديثًا ليس له نمط سابق يبدأ منه. و@starting-style توفّر هذا النمط:

\n
CSS
.toast {\n  opacity: 1;\n  translate: 0 0;\n  transition:\n    opacity 200ms ease-out,\n    translate 200ms ease-out,\n    display 200ms allow-discrete;\n}\n\n@starting-style {\n  .toast {\n    opacity: 0;\n    translate: 0 8px;\n  }\n}\n\n.toast[hidden] {\n  display: none;\n  opacity: 0;\n}
\n

حين تُزال السمة hidden، يبدأ المتصفّح الإشعار من قيم @starting-style وينتقل إلى القيم العادية. وtransition-behavior: allow-discrete (المكتوبة هنا allow-discrete في الاختصار) تتيح لـ display أن تنقلب في اللحظة المناسبة عند الخروج، فيكون التلاشي ظاهرًا قبل أن يختفي العنصر. @starting-style وtransition-behavior ضمن Baseline 2024، لذا تعمل حركة الدخول في كل المتصفّحات الحالية. أما تحريك display نفسها عند الخروج فليس ضمن Baseline بعد (يدعمه Chrome وSafari دون Firefox)، فيختفي الإشعار هناك فورًا بدل أن يتلاشى؛ وفي المتصفّحات الأقدم يظهر ببساطة دون حركة. وكلاهما بديل احتياطي جيد تمامًا.

\n

احترم تقليل الحركة

\n

بعض الناس يصابون بالدوار أو الغثيان أو التشتّت من الحركة على الشاشة، خصوصًا الحركة عبر مسافات طويلة، والـ parallax، والتكبير والتصغير. لأنظمة التشغيل إعداد «تقليل الحركة»، وتقرؤه CSS بـ prefers-reduced-motion.

\n

النمط الأمتن يجعل الحركة اختيارية:

\n
CSS
@media (prefers-reduced-motion: no-preference) {\n  .session-card {\n    transition: translate 200ms ease-out, box-shadow 200ms ease-out;\n  }\n  .live-dot::after {\n    animation: pulse 1.6s ease-out infinite;\n  }\n}
\n

المستخدمون الذين لم يطلبوا تقليل الحركة يحصلون على كل شيء. ومن طلبوه يحصلون على بطاقة ثابتة ونقطة ثابتة، وتظل الواجهة تعمل، لأن أيّ معلومة لا تعتمد على الحركة.

\n\n

وسترى أيضًا شبكة أمان عامة تضبط مدة كل حركة وكل transition على ما يقارب الصفر داخل @media (prefers-reduced-motion: reduce). إنها حاجز احتياطي معقول للأدوات الخارجية (widgets)، لكنها كاستراتيجية وحيدة فظّة: قد تربك السكربتات التي تعتمد على توقيت الحركة (وهي تستخدم مدة صغيرة غير صفرية تحديدًا لأن transition بمدة 0s لا يُطلق transitionend أبدًا)، وتزيل التلاشيات غير المؤذية مع الحركة المؤذية.

\n

دورك الآن

\n

بطاقة التمرين فيها مرور فوري، ونقطة ثابتة، ولا تعامل مع تقليل الحركة. أضف transition للمرور على خصائص محدّدة، ونبضًا متكرّرًا على النقطة، وغلّف الحركة الزخرفية لتعمل فقط عند المستخدمين الذين لم يطلبوا تقليلها. وبعدها ستحرّك الانتقال بين حالات الصفحة كاملة باستخدام الـ view transitions.

\n","toc":[{"id":"sec-1","text":"الـ transitions: بين حالتين","level":2},{"id":"sec-2","text":"الـ keyframes: حركة متعدّدة الخطوات ومتكرّرة","level":2},{"id":"sec-3","text":"حركات الدخول بـ @starting-style","level":2},{"id":"sec-4","text":"احترم تقليل الحركة","level":2},{"id":"sec-5","text":"دورك الآن","level":2}],"takeaways":["اذكر الخصائص التي تحرّكها بالتحديد (transition: translate 200ms ease-out) بدل all، حتى لا تتحرّك تغييرات الثيم وخصائص التخطيط بالصدفة.","استخدم الـ transitions للتغيّر بين حالتين، و@keyframes للحركة متعدّدة الخطوات أو المتكرّرة.","@starting-style تحدّد القيم التي ينطلق منها العنصر في الـ transition حين يظهر أول مرة، ما يجعل حركات الدخول من display: none ممكنة في CSS.","غلّف الحركة غير الضرورية في @media (prefers-reduced-motion: no-preference)، فيحصل من طلبوا حركة أقل على واجهة هادئة افتراضيًا."],"further":[{"title":"Using CSS transitions (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Transitions/Using"},{"title":"@starting-style (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@starting-style"},{"title":"prefers-reduced-motion (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion"}],"quiz":[{"q":"

لبطاقة transition: all 300ms. حين يتحوّل المستخدم إلى الوضع الداكن، تتلاشى ألوان الصفحة كلها ببطء. ما أنظف إصلاح؟

","options":[{"text":"أزل الـ transition في الوضع الداكن بـ media query.","why":"هذا يعالج العَرَض في حالة واحدة؛ وأيّ تغيير آخر في خاصية (تعديل padding عند breakpoint) سيظل يتحرّك."},{"text":"اضبط transition-duration: 0s على :root.","why":"الـ transitions غير موروثة، فلن يصل ذلك إلى البطاقة، وسيعطّل تأثير المرور أيضًا."},{"text":"حرّك الخصائص التي تقصدها فقط، مثل transition: translate 200ms, box-shadow 200ms.","why":"صحيح. ذكر الخصائص يجعل الحركة مقصودة؛ وتتغيّر الألوان والتخطيط فورًا ما لم تطلب غير ذلك."}],"answer":2},{"q":"

يظهر إشعار منبثق (toast) بالتبديل من display: none إلى display: block، والـ transition الخاص بـ opacity لا يعمل أبدًا. لماذا؟

","options":[{"text":"لا يمكن تحريك opacity على العناصر التي تستخدم display.","why":"تحريك opacity يعمل جيدًا؛ المشكلة أن العنصر ليس له نمط سابق ينطلق منه."},{"text":"حين يُرسم العنصر أول مرة لا توجد حالة سابقة، فلا شيء ينطلق منه الـ transition؛ و@starting-style توفّر هذه الحالة.","why":"صحيح. @starting-style { .toast { opacity: 0; } } تعطي المتصفّح قيم البداية لأول تحديث للنمط."},{"text":"الـ transitions لا تعمل إلا عند المرور بالمؤشّر.","why":"الـ transitions تعمل مع أيّ تغيّر في النمط المحسوب، أيًّا كان سببه."},{"text":"يجب ألّا تقل المدة عن 500ms ليلاحظها المتصفّح.","why":"لا يوجد حدّ أدنى للمدة؛ حتى الـ transitions بمدة 100ms تعمل."}],"answer":1},{"q":"

أيّ نهج يخدم على أفضل وجه المستخدمين الذين فعّلوا «تقليل الحركة» في نظام التشغيل؟

","options":[{"text":"ضع الحركة الزخرفية داخل @media (prefers-reduced-motion: no-preference)، واجعل التلاشي البسيط أو التغيّر الفوري هو الافتراضي.","why":"صحيح. تصبح الحركة اختيارية، وتظل الواجهة تعبّر عن تغيّرات الحالة للجميع."},{"text":"أخفِ كل عنصر متحرّك حين يكون تقليل الحركة مفعّلًا.","why":"إخفاء المحتوى يحذف معلومات. المستخدمون طلبوا حركة أقل، لا واجهة أقل."},{"text":"أبطئ كل حركة إلى ثانيتين.","why":"الحركة الأبطأ تظل حركة، والحركات الطويلة تجعل الواجهة تبدو معطوبة."}],"answer":0}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"
\n

Live now

\n

Motion With Manners

\n

Transitions, keyframes and reduced motion.

\n
","css":".session-card {\n padding: 12px 16px;\n border: 1px solid #e5e7eb;\n border-radius: 12px;\n background: white;\n}\n.session-card:hover {\n translate: 0 -2px;\n box-shadow: 0 6px 16px rgb(15 23 42 / 0.12);\n}\n.status { margin: 0; color: #b91c1c; font-weight: 600; }\n.live-dot {\n position: relative;\n display: inline-block;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: currentColor;\n}\n.live-dot::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 50%;\n background: currentColor;\n}\n\n/* Add the transition, the pulse animation and reduced-motion handling */\n"},"solution":{"html":"
\n

Live now

\n

Motion With Manners

\n

Transitions, keyframes and reduced motion.

\n
","css":".session-card {\n padding: 12px 16px;\n border: 1px solid #e5e7eb;\n border-radius: 12px;\n background: white;\n}\n.session-card:hover {\n translate: 0 -2px;\n box-shadow: 0 6px 16px rgb(15 23 42 / 0.12);\n}\n.status { margin: 0; color: #b91c1c; font-weight: 600; }\n.live-dot {\n position: relative;\n display: inline-block;\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: currentColor;\n}\n.live-dot::after {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 50%;\n background: currentColor;\n}\n\n@keyframes pulse {\n 0% { scale: 1; opacity: 1; }\n 70% { scale: 2.2; opacity: 0; }\n 100% { scale: 2.2; opacity: 0; }\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .session-card {\n transition: translate 200ms ease-out, box-shadow 200ms ease-out;\n }\n .live-dot::after {\n animation: pulse 1.6s ease-out infinite;\n }\n}\n"},"checks":[{"id":"transition-specific","test":"const all = []; const walk = (rules, media) => { for (const r of rules) { all.push({ r, media }); if (r.cssRules) walk(r.cssRules, media || (r instanceof CSSMediaRule && r.conditionText.includes('prefers-reduced-motion') ? r.conditionText : '')); } }; for (const s of document.styleSheets) walk(s.cssRules, ''); if (matchMedia('(prefers-reduced-motion: reduce)').matches) return all.some(({ r }) => r.style && /translate|transform/.test(r.style.transitionProperty || r.style.transition || '')); const props = style('.session-card', 'transition-property').split(',').map((s) => s.trim()); return props.some((p) => p === 'translate' || p === 'transform') && props.includes('box-shadow') && !props.includes('all');"},{"id":"transition-duration","test":"const all = []; const walk = (rules, media) => { for (const r of rules) { all.push({ r, media }); if (r.cssRules) walk(r.cssRules, media || (r instanceof CSSMediaRule && r.conditionText.includes('prefers-reduced-motion') ? r.conditionText : '')); } }; for (const s of document.styleSheets) walk(s.cssRules, ''); if (matchMedia('(prefers-reduced-motion: reduce)').matches) return true; const ds = style('.session-card', 'transition-duration').split(',').map((s) => parseFloat(s) * (s.trim().endsWith('ms') ? 0.001 : 1)); return ds.length > 0 && ds.every((d) => d >= 0.1 && d <= 0.4);"},{"id":"pulse-loops","test":"const all = []; const walk = (rules, media) => { for (const r of rules) { all.push({ r, media }); if (r.cssRules) walk(r.cssRules, media || (r instanceof CSSMediaRule && r.conditionText.includes('prefers-reduced-motion') ? r.conditionText : '')); } }; for (const s of document.styleSheets) walk(s.cssRules, ''); const hasKeyframes = all.some(({ r }) => r instanceof CSSKeyframesRule); if (matchMedia('(prefers-reduced-motion: reduce)').matches) return hasKeyframes; const s = getComputedStyle($('.live-dot'), '::after'); return hasKeyframes && s.animationName !== 'none' && s.animationIterationCount === 'infinite';"},{"id":"pulse-cheap","test":"const all = []; const walk = (rules, media) => { for (const r of rules) { all.push({ r, media }); if (r.cssRules) walk(r.cssRules, media || (r instanceof CSSMediaRule && r.conditionText.includes('prefers-reduced-motion') ? r.conditionText : '')); } }; for (const s of document.styleSheets) walk(s.cssRules, ''); const kf = all.map(({ r }) => r).filter((r) => r instanceof CSSKeyframesRule); if (!kf.length) return false; const allowed = ['scale', 'opacity', 'transform', 'translate', 'rotate']; return kf.every((k) => [...k.cssRules].every((f) => [...f.style].every((p) => allowed.includes(p))));"},{"id":"reduced-motion","test":"const all = []; const walk = (rules, media) => { for (const r of rules) { all.push({ r, media }); if (r.cssRules) walk(r.cssRules, media || (r instanceof CSSMediaRule && r.conditionText.includes('prefers-reduced-motion') ? r.conditionText : '')); } }; for (const s of document.styleSheets) walk(s.cssRules, ''); return all.some(({ r, media }) => media && r.style && (r.style.animation || r.style.animationName || r.style.transition || r.style.transitionProperty || r.style.animationDuration || r.style.transitionDuration));"}],"title":"حركة بأدب","prompt":"

أضف الحركة إلى البطاقة، بلطف:

\n
    \n
  1. أضف transition لارتفاع المرور: حرّك translate (أو transform) و**box-shadow** فقط، ولا تستخدم all أبدًا، بمدد بين 100ms و400ms.
    2. \n
  2. أنشئ حركة @keyframes تجعل هالة .live-dot::after تنبض إلى الأبد، باستخدام خصائص رخيصة فقط (scale وopacity وtransform وtranslate وrotate).
    3. \n
  3. اجعل الـ transition والنبض يحترمان prefers-reduced-motion (يُنصح بالنمط الاختياري مع no-preference).
    4. \n
\n","hints":["تقبل transition قائمة مفصولة بفواصل: translate 200ms ease-out, box-shadow 200ms ease-out.","للنبض حرّك scale وopacity في @keyframes، واستخدم infinite كعدد للتكرار.","ضع تصريحي transition وanimation كليهما داخل @media (prefers-reduced-motion: no-preference) { … }."],"explanation":"

ذكر translate وbox-shadow يعني أن الارتفاع وحده يتحرّك؛ وتبقى تغييرات الثيم والتخطيط فورية. والـ keyframes الخاصة بالنبض لا تلمس إلا scale وopacity، اللتين تستطيع المتصفّحات تحريكهما على الـ compositor دون إعادة حساب التخطيط. وتغليف الاثنين داخل @media (prefers-reduced-motion: no-preference) يجعل الحركة اختيارية: من طلبوا من نظام التشغيل تقليل الحركة يحصلون على بطاقة ثابتة ونقطة ثابتة، بينما يظل النص «Live now» يخبرهم بما كانت تعنيه النقطة.

\n","checkLabels":{"transition-specific":"المرور يحرّك translate وbox-shadow، لا all","transition-duration":"مدد الـ transition بين 100ms و400ms","pulse-loops":"هالة نقطة Live تنبض إلى الأبد","pulse-cheap":"الـ keyframes لا تحرّك إلا خصائص رخيصة","reduced-motion":"الحركة تحترم prefers-reduced-motion"}},"words":637,"readMinutes":4}