تقديم
كتب هذا المقال أشرف عبدالدايم مطور واجهة المستخدم في TieLabs سابقاً، 95% من كود CSS الموجود في قالب جنة من كتابة أشرف :)
في هذا الدرس إن شاء الله سنقوم بشرح واحدة من أقوى الخصائص التي تم إضافتها في الإصدار الثالث من CSS وهي خاصية تأثير الإنتقال transition
الإصدار الثالث من لغة CSS جاء بالعديد من المميزات التي تمثل ثورة في CSS حيث تم دعم الحركات والإنتقالات بإستخدام خواص جديدة تم إضافتها، في السابق كانت الحركات في صفحة الويب يتم إضافتها فقط من خلال لغة Javascript، وهذا يمثل عبئ إضافي على المطورين وإستغراق وقت أطول وجهد أكثر، لكن الآن وبكل سهولة يمكنك إضافتة العديد من تأثيرات الحركات على العنصر بالقليل من الأكواد، كما أنها لا ستتغرق وقت في التحميل حيث يتم تحميلها مع تنسيقات CSS الأخرى، وبالتالي ستكون أول من يعمل فور تحميل صفحة الويب.
في هذا الدرس والدروس التالية إن شاء الله سنقوم بتوضيح الخواص المتعلقة بالحركات والإنتقالات وبعض الخصائص التي أضيفت في الإصدار الثالث من CSS، عند استخدام هذة الخواص مع بعضها البعض ستحصل على نتائج مبهرة حيث ستتحول صفحة الويب من الحالة الثابت، إلى الحالة المتحركة والأكثر تفاعليه.
وبدون تأثير الإنتقال (كما كان في السابق)، سينتقل العنصر بصورة مفاجئة من حالة لأخرى، وهذا في كثير من الأحيان يفقدك ميزة هامة جداً، وهي إضفاء معنى جديد على العنصر من خلال نوع الحركة المستخدمة.
دعنا نلقي نظرة على الفرق بين مثالين أحدهما لا يستخدم تأثيرات الحركة، والأخر يستخدمها:
See the Pen CSS Transition #1 by Ashraf Reda (@ashrafreda) on CodePen.
قم بتمرير مؤشر الفأرة على المربع الأول (الرمادي) في المثال السابق، لاحظ كيف تم الإنتقال من الحالة الأولى (الحجم الإفتراضي) إلى الحالة الثانية (حجم أكبر بنسبة 1.5)، ولاحظ كيف تم الإنتقال التدريجي بطريقة سلسة في المربع الثاني (الأخضر).
يمكنك أيضاً استخدام الخاصية transition مع العديد من الخصائص، مثل الألوان (نصوص وخلفيات) الأبعاد width & height، الهوامش margins والحواشي paddings وهكذا..
هناك أربعة خصائص متعلقة بتأثير الإنتقال Transition:
- الخاصية transition-property : تقوم بتحديد الخاصية التي سيتم تحريكها.
- الخاصية transition-duration : تقوم بتحديد مدة الحركة (من البداية حتى النهاية).
- الخاصية transition-timing-function : تقوم بتحديد كيفية الإنتقال من الحالة الأولية إلى الحالة النهائية (كيف يتم حساب الحالات المتوسطة).
- الخاصية transition-delay : تقوم بتحديد مدة الإنتظار قبل بداية الحركة.
كي يعمل تأثير الإنتقال لابد من تعريف الخاصيتين transition-property و transition-duration وفي حالة عدم تعريف الخاصيتين الأخريين يتم إعطاء القيمة الإفتراضية لكلٍ منهما.
الصيغة المختصرة لخاصية الإنتقال Transition Shorthand
بدلاً من إستخدام كل خاصية من خواص الإنتقال بصورة منفردة (كما في المثال السابق) هكذا:
| 1 2 3 4 5 6 7 8 | .box2{ transition-property: all; transition-duration: 1s; transition-timing-function: ease; transition-delay: 0; } |
يمكنك (كما هو الحال في معظم خصائص CSS) استخدام الصيغة المختصرة لخاصية الإنتقال transition، هكذا:
| 1 2 3 4 5 | div { transition: [property][duration][timing-function][delay]; } |
وبذلك يصبح استخدام خواص الإنتقال أسهل كثيراً (وهذة الصيغة هي الصيغة الشائعة بين مطورين الويب)، أضف إلى ذلك أيضاً إمكانية حذف الخواص ذات القيم الإفتراضية، فيكون بإمكانك استخدام خواص الإنتقال بصيعة مختصرة هكذا:
| 1 2 3 4 5 | .box2{ transition: all 1s; } |
الخاصية transition-property (مطلوب تعيينها)
الخاصية transition-property تقوم بتحديد أي من خصائص CSS داخل القاعدة Rule-set سيتم تطبيق تأثير الإنتقال عليها. بإمكانك استخدام خاصية منفرده مثل background-color أو color أو transform وبإمكانك استخدام الكلمة المفتاحية all ليتم تطبيق تأثير الإنتقال على جميع الخصائص المتعلقة بالعنصر.
القيمة الإفتراضية لها هي none لذلك يجب تعيين قيمة أخرى لها كي تعمل باقي خواص الإنتقال.
جميع الإستخدامات التالية للخاصية transition-property صحيحة:
| 1 2 3 4 5 6 7 8 | transition-property: all; transition-property: color; transition-property: background-color; transition-property: left, top; transition-property: transform, color, background-color; transition-property: letter-spacing, font-size, line-height; |
بما أنه يمكن تطبيق تأثير الإنتقال على خاصية معينة، إذاً يمكننا تطبيق تأثير الإنتقال أكثر مرة على نفس العنصر، كل مرة على خاصية مختلفة بقيم مختلفة.
يستخدم المثال التالي خصائص إنتقال مختلفة لتحديد تأثيرات انتقال مختلفة على العنصر نفسه. سيتم مطابقة القيمة الأولى في كل خاصية بالقيمة الأولى للخواص الأخرى ، والثانية إلى الثانية ، وهكذا.
| 1 2 3 4 5 6 | .element { transition: left 1s ease-in-out, background-color 0.5s 0.5s; } |
See the Pen CSS Transition #2 by Ashraf Reda (@ashrafreda) on CodePen.
هنا سيتم تطبيق تأثير الإنتقال على الخصائص التالية:
- بُعد العنصر من جهة left اليسار في مدة زمنية 1 ثانية بنوع الحركة ease-in-out بدون وقت إنتظار.
- لون خلفية العنصر background-color في مدة زمنية 0.5 من الثانية بنوع الحركة الإفتراضي ease ووقت إنتظار 0.5 من الثانية.
الخاصية transition-duration (مطلوب تعيينها)
تقوم الخاصية transition-duration بتحديد المدة الزمنة لعملية الإنتقال، يمكنك تحديدها بوحدة القياس s ثانية أو ms ملي ثانية (ثانية = ١٠٠٠ ملي ثانية).
| 1 2 3 4 5 | div{ transition-duration: 3s; } |
القيمة الإفتراضية لها هي صفر، لذلك يجب تعيينها كي تعمل باقي خصائص الإنتقال.
See the Pen CSS Transition #3 by Ashraf Reda (@ashrafreda) on CodePen.
لاحظ كيف أن العنصر الأول (الأحمر) انتقل من نقطة البداية إلى النهاية في 0.3s او ٣٠٠ مللي ثانية، والعنصر الثاني (الأخضر) انتقل في ١ ثانية، والعنصر الثالث ثلاثة ثواني.
الخاصية transition-timing-function
تحدد الخاصية transition-timing-function كيفية الإنتقال من الحالة الأولى إلى الحالة الثانية، أو بمعنى أخر تحدد سرعة الإنتقال خلال المدة الزمنية المُحددة، هل ستكون السرعة متساوية من البداية إلى النهاية، أم ستكون الحركة بطيئة في البداية وسريعة في النهاية أم ستكون متفاوتة من نقطة لأخرى، هذا كله ما ستحدده هذة الخاصية.
القيمة الإفتراضية هي ease أي أن الحركة ستبدأ ببطئ ثم تزداد ثم تنتهي ببطئ مرة ثانية، كما أن هناك قيم أخرى:
- ease-in
- ease-out
- ease-in-out
- linear
- سرعة مُخصصة بإستخدام الدالة [highlight color="gray"]cubic-bezier( number , number, number, number)
- steps(integer, [start || end])
| 1 2 3 4 5 | div{ transition-timing-function: ease; } |
الآن دعنا نقوم بتوضيح الفرق بين الأنواع المختلفة للإنتقال بهذا المثال:
See the Pen CSS Transition #4 by Ashraf Reda (@ashrafreda) on CodePen.
الخاصية transition-delay
الخاصية transition-delay تقوم بتحديد مدة الإنتظار قبل بدء الحركة. ويتم قياسها بالثانية أو المللي ثانية وهما وحدتا القياس لأي مدة زمنية.
القيمة الإفتراضية هي صفر، لذلك ستبدأ الحركة مباشرةً دون انتظار أي مدة زمنية قبل بدء الحركة.
| 1 2 3 4 5 | div{ transition-timing-function: 0.5s; } |
See the Pen CSS Transition #5 by Ashraf Reda (@ashrafreda) on CodePen.
ملاحظات وتوضيحات
ليس كل خصائص CSS يمكنك تطبيق تأثير الإنتقال عليها، قامت منظمة W3C بتحديد الخصائص والأنواع التي يمكنك تحريكها في هذة القائمة، أيضاً يمكنك تصفح هذة القائمة بشكل أكثر تنسيقاً في هذا المقال.
- المتصفح Chrome : اللاحقة
-webkit- - المتصفح Safari : اللاحقة
-webkit- - المتصفح Firefox : اللاحقة
-moz- - المتصفح Internet Explorer : اللاحقة
-ms- - المتصفح Opera : اللاحقة
-o-
وتستخدم كالتالي:
| 1 2 3 4 5 6 7 | -webkit-transition: all 4s ease; -moz-transition: all 4s ease; -ms-transition: all 4s ease; -o-transition: all 4s ease; transition: all 4s ease; |
هذا الموقع يوضح الخواص التي مازالت تحتاج إلى لواحق والخصائص التي أصبحت قياسية على جميع المتصفحات ويمكنك استخدامها بدون لواحق.
