انتقالات

عند التفاعل مع موقع إلكتروني، قد تلاحظ أنّ العديد من العناصر لها حالة. على سبيل المثال، يمكن أن تكون القوائم المنسدلة مفتوحة أو مغلقة. قد يتغيّر لون الأزرار عند التركيز عليها أو تمرير مؤشر الماوس فوقها. تظهر النوافذ المنبثقة وتختفي.

وبشكلٍ تلقائي، تبدِّل CSS نمط هذه الحالات على الفور.

باستخدام عمليات النقل في CSS، يمكننا إجراء عمليات الاستبدال بين الحالة الأولية والحالة المستهدَفة للعنصر. ويُحسِّن الانتقال بين الاثنين تجربة المستخدم من خلال تقديم إرشادات مرئية ودعم وتلميحات حول سبب التفاعل وتأثيره.

سمات الانتقال

Browser Support

  • Chrome: 26.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

لاستخدام الانتقالات في CSS، يمكنك استخدام سمات الانتقال المختلفة أو السمة المختصرة transition.

transition-property

تحدّد السمة transition-property الأنماط التي سيتم نقلها.

.my-element {
  transition-property: background-color;
}

تقبل العلامة transition-property اسمًا واحدًا أو أكثر من أسماء خصائص CSS في قائمة مفصولة بفواصل.

يمكنك اختياريًا استخدام transition-property: all للإشارة إلى أنّه يجب نقل كلّ موقع.

transition-duration

تُستخدَم السمة transition-duration لتحديد المدة التي سيستغرقها انتقال لإكماله.

يقبل transition-duration وحدات الوقت، إما بالثواني (s) أو بالملي ثانية (ms)، ويكون الإعداد التلقائي هو 0s.

transition-timing-function

استخدِم السمة transition-timing-function لتغيير سرعة انتقال CSS على مدار transition-duration.

سينقل CSS العناصر تلقائيًا بسرعة ثابتة (transition-timing-function: linear). يمكن أن تبدو الانتقالات الخطية مصطنعة إلى حدٍ ما، لأنّ الأجسام في الحياة الواقعية لها وزن ولا يمكن إيقافها وتشغيلها على الفور. يمكن أن يؤدي الانتقال إلى الانتقال أو الخروج منه بشكل سلس إلى جعل الانتقالات أكثر حيوية وطبيعية.

تقدّم الوحدة المتعلّقة بالصور المتحركة في CSS نظرة عامة جيدة على دوالّ التوقيت.

يمكنك استخدام DevTools لتجربة وظائف توقيت مختلفة في الوقت الفعلي.

محرِّر أوقات الانتقالات المرئية في "أدوات مطوري البرامج في Chrome"

transition-delay

استخدِم السمة transition-delay لتحديد الوقت الذي سيبدأ فيه أحد الانتقالات. إذا لم يتم تحديد transition-delay، ستبدأ الانتقالات على الفور لأنّ القيمة التلقائية هي 0s. تقبل هذه السمة وحدة زمنية، مثل الثواني (s) أو الميلّي ثانية (ms).

يكون هذا السمة مفيدًا في الانتقالات المتقطّعة، ويتم تحقيق ذلك من خلال ضبط transition-delay أطول لكل عنصر لاحق في المجموعة.

يُعدّ transition-delay مفيدًا أيضًا لتصحيح الأخطاء. يمكن أن يؤدي ضبط المدة الزمنية للانتقال إلى قيمة سلبية إلى بدء انتقال في وقت لاحق من المخطط الزمني.

الاختصار: انتقال

مثل معظم خصائص CSS، هناك نسخة مختصرة. يجمع transition الرمزَين transition-property وtransition-duration وtransition-timing-function وtransition-delay.

.longhand {
  transition-property: transform;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
}

.shorthand {
  transition: transform 300ms ease-in-out 0s;
}

ما هي البيانات التي يمكن نقلها وما هي البيانات التي لا يمكن نقلها؟

عند كتابة لغة CSS، يمكنك تحديد الخصائص التي يجب أن تتضمّن انتقالات متحركة. اطّلِع على قائمة MDN هذه التي تتضمّن خصائص CSS القابلة للتحريك.

بشكل عام، لا يمكن نقل سوى العناصر التي يمكن أن تتضمّن "حالة وسطى" بين حالتَي البدء والنهاية. على سبيل المثال، من المستحيل إضافة عمليات انتقال إلى font-family، لأنّه من غير الواضح كيف يجب أن تبدو "الحالة الوسطى" بين serif وmonospace. من ناحية أخرى، من الممكن إضافة انتقالات إلى font-size لأنّ وحدته هي طول يمكن إجراء عملية تداخل بينه.

مخطّط بياني للأشكال التي تنتقل بسلاسة من حالة إلى أخرى، وسطرَان من النص بخطوط مختلفة لا يمكن نقلهما بسلاسة

في ما يلي بعض الخصائص الشائعة التي يمكنك نقلها.

تحويل

Browser Support

  • Chrome: 36.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

يتم عادةً نقل سمة CSS transform لأنّها سمة مُسرَّعة باستخدام وحدة معالجة الرسومات تؤدي إلى ظهور حركة أكثر سلاسة تستهلك أيضًا طاقة أقل من البطارية. تتيح لك هذه السمة تغيير حجم عنصر أو تدويره أو نقله أو انحرافه بشكل عشوائي.

اطّلِع على القسم الخاص بالتحويلات في وحدة الدوالّ.

اللون

يمكن أن يكون اللون مؤشرًا رائعًا للحالة قبل التفاعل وأثناءه وبعده. على سبيل المثال، قد يتغير لون زر إذا تم تمرير مؤشر الماوس فوقه. يمكن أن يقدّم هذا التغيير في اللون ملاحظات للمستخدم بأنّ الزر قابل للنقر.

إنّ سمات color وbackground-color وborder-color هي مجرد أماكن قليلة يمكن فيها تغيير اللون عند التفاعل.

اطّلِع على الوحدة المتعلّقة بالألوان.

الظلال

غالبًا ما يتم نقل الظلال للإشارة إلى تغيير الارتفاع، مثل التركيز على المستخدم.

اطّلِع على الوحدة المتعلّقة بالظلال.

الفلاتر

filter هي سمة فعّالة في CSS تتيح لك إضافة تأثيرات رسومية على الفور. يمكن أن يؤدي الانتقال بين حالات filter المختلفة إلى تحقيق بعض النتائج المميّزة.

اطّلِع على الوحدة المتعلّقة بالفلاتر.

عوامل تشغيل الانتقال

يجب أن يتضمّن رمز CSS تغيير حالة وحدثًا يؤدي إلى تغيير الحالة هذا لتفعيل عمليات النقل في CSS. ومن الأمثلة الشائعة على هذا المشغّل :hover الفئة الزائفة. تتطابق هذه الفئة الزائفة عندما يمرّر المستخدم مؤشر الماوس فوق عنصر.

في ما يلي قائمة ببعض الفئات الزائفة والأحداث التي يمكن أن تؤدي إلى تغييرات في حالة عناصرك.

  • :hover: تتطابق إذا كان المؤشر فوق العنصر.
  • :focus: تتطابق إذا كان التركيز على العنصر.
  • :focus-within : يتطابق إذا كان العنصر أو أي من سلفه مركّزًا عليه.
  • :target: يتطابق عندما يتطابق الجزء من عنوان URL الحالي مع معرّف العنصر.
  • :active: تطابق عند تفعيل العنصر (عادةً عند الضغط على الماوس فوقه).
  • class التغيير من JavaScript: عندما يتغيّر class عنصر CSS من خلال JavaScript، ستنقل CSS السمات المؤهَّلة التي تغيّرت.

انتقالات مختلفة للدخول أو الخروج

من خلال ضبط سمات transition مختلفة عند التمرير بمؤشر الماوس أو التركيز، من الممكن إنشاء بعض التأثيرات المثيرة للاهتمام.

.my-element {
  background: red;

  /* This transition is applied on the "exit" transition */
  transition: background 2000ms ease-in;
}

.my-element:hover {
  background: blue;

  /* This transition is applied on the "enter" transition */
  transition: background 150ms ease;
}

اعتبارات لتسهيل الاستخدام

لا تُعدّ عمليات النقل في CSS مناسبة للجميع. قد تؤدي الانتقالات والصور المتحركة إلى شعور بعض الأشخاص بدوار في الحركة أو عدم ارتياح. لحسن الحظ، تتضمّن CSS ميزة وسائط تُعرف باسم prefers-reduced-motion تعمل على رصد ما إذا كان المستخدم قد أشار إلى تفضيله لعرض صور بطيئة الحركة على جهازه.

/*
  If the user has expressed their preference for
  reduced motion, then don't use transitions.
*/
@media (prefers-reduced-motion: reduce) {
  .my-element {
    transition: none;
  }
}

/*
  If the browser understands the media query and the user
  explicitly hasn't set a preference, then use transitions.
*/
@media (prefers-reduced-motion: no-preference) {
  .my-element {
    transition: transform 250ms ease;
  }
}

يمكنك الاطّلاع على مقالة المدوّنة prefers-reduced-motion: Sometimes less movement is more للحصول على مزيد من المعلومات عن ميزة الوسائط هذه.

اعتبارات الأداء

عند استخدام عمليات النقل في CSS، قد تواجه مشاكل في الأداء في حال إضافة عمليات نقل لسمات CSS معيّنة. على سبيل المثال، عندما تتغيّر سمات مثل width أو height، يتم دفع المحتوى في باقي الصفحة. ويؤدي ذلك إلى إجبار CSS على احتساب مواضع جديدة لكل عنصر متأثر في كل إطار من عملية النقل. وننصحك باستخدام سمات مثل transform وopacity بدلاً من ذلك كلما أمكن.

يمكنك الاطّلاع على دليلنا حول الرسومات المتحرّكة عالية الأداء في CSS للتعرّف على هذا الموضوع بشكل مفصّل.

التحقّق من فهمك

اختبِر معلوماتك حول الانتقالات

ما هي خاصية الانتقال المخصّصة لتحديد السهولة؟

animation-ease
transition-easing
transition-duration
transition-cubic-bezier
transition-timing-function

من أفضل الممارسات استخدام transition-property: all.

صحيح
خطأ

يمكن نقل جميع المواقع.

صحيح
خطأ