The CSS Podcast - 044: Transitions
عند التفاعل مع موقع إلكتروني، قد تلاحظ أنّ العديد من العناصر لها حالة. على سبيل المثال، يمكن أن تكون القوائم المنسدلة مفتوحة أو مغلقة. قد يتغيّر لون الأزرار عند التركيز عليها أو تمرير مؤشر الماوس فوقها. تظهر النوافذ المنبثقة وتختفي.
وبشكلٍ تلقائي، تبدِّل CSS نمط هذه الحالات على الفور.
باستخدام عمليات النقل في CSS، يمكننا إجراء عمليات الاستبدال بين الحالة الأولية والحالة المستهدَفة للعنصر. ويُحسِّن الانتقال بين الاثنين تجربة المستخدم من خلال تقديم إرشادات مرئية ودعم وتلميحات حول سبب التفاعل وتأثيره.
سمات الانتقال
لاستخدام الانتقالات في 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 لتجربة وظائف توقيت مختلفة في الوقت الفعلي.
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
لأنّ وحدته هي طول يمكن إجراء عملية تداخل بينه.
في ما يلي بعض الخصائص الشائعة التي يمكنك نقلها.
تحويل
يتم عادةً نقل سمة 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
.
يمكن نقل جميع المواقع.