تعلّمنا في المقالة الماضية كيفية عمل الخاصية transition، وسنلقي في هذه المقالة نظرة على خاصيات الانتقالات.
هذه المقالة جزء من سلسلة من المقالات حول التحريك في CSS:
- ما هي استخدامات الحركات؟
- تجهيز بيئة العمل لإنشاء الحركات
- مدخل إلى الانتقالات: التنقل بين الحالات
- مدخل إلى الحركات: مفهوم الحركة
- تطبيق عملي: الانتقالات
- خاصيات الانتقالات
- دوال التوقيت
- الانتقالات المتعددة
- الانتقالات وجافاسكربت
- تطبيق عملي: التحريكات
- خاصيات الحركات
- تطبيق عملي: الإطارات المفتاحية
- الحركات المتعددة المتزامنة
- موجز الحركات
- رواية القصص عبر الحركات
- حرب النجوم
- إظهار المحتوى أثناء التمرير
- سهولة الوصول
- نهاية الرحلة
الصياغة المختزلة مقابل الصياغة المطولة
عند كتابة شيفرة CSS، يمكننا في كثير من الأحيان اختزال عدة خاصيات في خاصية واحدة مختزلة. على سبيل المثال، الصياغة المختزلة للخاصية padding تُكتب على النحو التالي:
padding: 10px 20px 15px 25px;
وهذا يكافئ:
padding-top: 10px; padding-right: 20px; padding-bottom: 15px; padding-left: 25px;
يمكننا بالطريقة نفسها كتابة الخاصية transition بشكل مختزل:
transition: all 0.5s 1s linear;
وهذا هو الشكل العام:
transition: [property] [duration] [delay] [timing-function];
يمكن كتابة كل واحدة من هذه الخاصيات بشكل منفرد:
transition-property: all; transition-duration: 0.5s; transition-delay: 1s; transition-timing-function: linear;
لنلق نظرة على هذه الخاصيات.
الخاصية transition-property
عادةً ما ترد في بداية الصياغة المختزلة، وتمثلُ الخاصيةَ التي سيقوم المتصفح بتحريكها. لتغيير الخلفية على سبيل المثال، يمكن استخدام القيمة background. من الممكن أيضًا استخدام القيمة all، والتي تمثل جميع خاصيات CSS التي ينطبق عليها الانتقال.
الخاصية transition-duration
تمثل قيمةُ الخاصية transition-duration المدةَ التي يستغرقها الانتقال. فترة انتقال تساوي 3s (ثلاث ثوانٍ) ستكون أطول بثلاث مرات من فترة انتقال تساوي 1000ms.
الخاصية transition-delay
تخبر الخاصية transition-delay المتصفح بالانتظار قبل تطبيق الانتقال. هذه قيمة زمنية، ويمكن تحديدها بالثانية أو الميلي ثانية(ms). على سبيل المثال، 3s تكافئ ثلاث ثوان، و100ms تكافئ مئة ميلي ثانية. بشكل مكافئ، يمكنك كتابة تلك القيمة على شكل 0.1s. الأمر متروك لك.
الخاصية transition-timing-function
تستخدِم كل من الانتقالات (transitions) والتحريكات (animations) دوال التوقيت (timing functions). تحتاج دوال التوقيت إلى فقرة خاصة بها، لذا سنؤجل الحديث عنها إلى المقالة التالية. لكن بإيجاز، دوال التوقيت تعطي للتحريكات حيوية.
الأشياء التي لا يطبّق الانتقال عليها
رغم أنه يمكن استخدام الانتقالات على الخاصيات size و colour و border و background-position وغيرها، إلا أنّ هناك بعض الخاصيات التي لا يمكن تطبيق الانتقال عليها. فمثلًا، لا يمكن تطبيق الانتقال على عائلة الخطوط font-family، لأنّ هذا يعني أنّ على المتصفح إنشاء إطارات مفتاحية (keyframes) بين صورتين مختلفتين تمامًا من الخطوط.
صور الخلفية المُنشأة باستخدام CSS، مثل التدرجات (generated gradients)، لا يمكن تطبيق التحريك على خاصياتها. لأنّ ذلك يعني أنّ المتصفح سيكون عليه استبدال صورة الخلفية بكل الإطارات المفتاحية للتحريك، لذلك فهو غير مدعوم.
لكن يمكن تحريك خاصيات من قبيل opacity و background-position. وعن طريق تحريك صور الخلفية أو إخفائها، يمكنك إنشاء تأثيرات جذابة.
يمكنك مشاهدة مثال Baymax، حيث يتم تحريك صورة الخلفية لإنشاء حركة.
يتم استخدام تأثير مماثل لإحداث تأثير اللمعان على الأزرار، حيث يتم تحريك تدرج الخلفية في مقدمة الزر.
تمرين
لقد أنشأت مثالًا على Codepen لتجربة الانتقالات.
المثال يقوم بالانتقال من شكل الماس (diamond shape) إلى شكل الدائرة. حاول تغيير بعض الخاصيات لمعرفة ما سيحدث.
إذا كنت ترغب في التعمق أكثر في هذا الموضوع، فاضغط على الزر "Fork" لإنشاء نسختك الخاصة، ويمكنك بعد ذلك حفظ عملك في حساب Codepen الخاص بك.
المصادر
- ترجمة وبتصرف للفصل transitions-properties من كتاب CSS Animation 101 لمؤلفه Donovan Hutchinson.
اقرأ أيضًا
- المقالة التالية: دوال التوقيت
- المقال السابقة: تطبيق عملي: الانتقالات
- النسخة العربية الكاملة من كتاب: التحريك عبر CSS
أفضل التعليقات
لا توجد أية تعليقات بعد
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.