دروس متقدمة في CSS

تأثير الإنتقال Transition في CSS

الإنتقال تدريجياً من حالة لأخرى بطريقة سلسة

تقديم

كتب هذا المقال أشرف عبدالدايم مطور واجهة المستخدم في TieLabs سابقاً، 95% من كود CSS الموجود في قالب جنة من كتابة أشرف :)

في هذا الدرس إن شاء الله سنقوم بشرح واحدة من أقوى الخصائص التي تم إضافتها في الإصدار الثالث من CSS وهي خاصية تأثير الإنتقال transition

الإصدار الثالث من لغة CSS جاء بالعديد من المميزات التي تمثل ثورة في CSS حيث تم دعم الحركات والإنتقالات بإستخدام خواص جديدة تم إضافتها، في السابق كانت الحركات في صفحة الويب يتم إضافتها فقط من خلال لغة Javascript، وهذا يمثل عبئ إضافي على المطورين وإستغراق وقت أطول وجهد أكثر، لكن الآن وبكل سهولة يمكنك إضافتة العديد من تأثيرات الحركات على العنصر بالقليل من الأكواد، كما أنها لا ستتغرق وقت في التحميل حيث يتم تحميلها مع تنسيقات CSS الأخرى، وبالتالي ستكون أول من يعمل فور تحميل صفحة الويب.

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

بإختصار، الإنتقالات Transitions في CSS تعني إنتقال العنصر تدريجياً وبطريقة سلسة من حالة إلى حالة أخرى، أو بصورة أخرى، يتم تحريك خصائص العنصر (القالبة للتحريك) من الصورة الأولية إلى الصورة النهائية.
وبدون تأثير الإنتقال (كما كان في السابق)، سينتقل العنصر بصورة مفاجئة من حالة لأخرى، وهذا في كثير من الأحيان يفقدك ميزة هامة جداً، وهي إضفاء معنى جديد على العنصر من خلال نوع الحركة المستخدمة.

دعنا نلقي نظرة على الفرق بين مثالين أحدهما لا يستخدم تأثيرات الحركة، والأخر يستخدمها:

See the Pen CSS Transition #1 by Ashraf Reda (@ashrafreda) on CodePen.

قم بتمرير مؤشر الفأرة على المربع الأول (الرمادي) في المثال السابق، لاحظ كيف تم الإنتقال من الحالة الأولى (الحجم الإفتراضي) إلى الحالة الثانية (حجم أكبر بنسبة 1.5)، ولاحظ كيف تم الإنتقال التدريجي بطريقة سلسة في المربع الثاني (الأخضر).

في هذا الدرس سنقوم بإستخدام الخاصية transfrom (التي لم نقم بشرحها بعد) مع الخاصية transiton حيث أن الخاصية transfrom يمكنها إضافة تأثيرات رائعة للعناصر وعند دمجها مع تأثيرات الإنتقال تحصل على نتائج ممتازة،  فقط قم بالتركيز على الخاصية transition وكيفية عملها بدون التركيز على الخاصية transform، حيث سنقوم بشرحها في الدرس القادم إن شاء الله.
يمكنك أيضاً استخدام الخاصية transition مع العديد من الخصائص، مثل الألوان (نصوص وخلفيات) الأبعاد width & height، الهوامش margins والحواشي paddings وهكذا..

هناك أربعة خصائص متعلقة بتأثير الإنتقال Transition:

  1. الخاصية transition-property  : تقوم بتحديد الخاصية التي سيتم تحريكها.
  2. الخاصية transition-duration : تقوم بتحديد مدة الحركة (من البداية حتى النهاية).
  3. الخاصية transition-timing-function : تقوم بتحديد كيفية الإنتقال من الحالة الأولية إلى الحالة النهائية (كيف يتم حساب الحالات المتوسطة).
  4. الخاصية transition-delay : تقوم بتحديد مدة الإنتظار قبل بداية الحركة.

كي يعمل تأثير الإنتقال لابد من تعريف الخاصيتين transition-property و transition-duration وفي حالة عدم تعريف الخاصيتين الأخريين يتم إعطاء القيمة الإفتراضية لكلٍ منهما.

 الصيغة المختصرة لخاصية الإنتقال Transition Shorthand

بدلاً من إستخدام كل خاصية من خواص الإنتقال بصورة منفردة (كما في المثال السابق) هكذا:

لاحظ أنه بإمكانك حذف الخواص ذات القيم الإفتراضية، فمثلاً الخاصية transition-timing-function القيمة الإفتراضية لها هي ease إذاً فمن الممكن حذفها، وأيضاً الخاصية transition-delay القيمة الإفتراضية لها هي صفر، إذا فمن الممكن حذفها هي الأخرى.

يمكنك (كما هو الحال في معظم خصائص CSS) استخدام الصيغة المختصرة لخاصية الإنتقال transition، هكذا:

وبذلك يصبح استخدام خواص الإنتقال أسهل كثيراً (وهذة الصيغة هي الصيغة الشائعة بين مطورين الويب)، أضف إلى ذلك أيضاً إمكانية حذف الخواص ذات القيم الإفتراضية، فيكون بإمكانك استخدام خواص الإنتقال بصيعة مختصرة هكذا:

الخاصية transition-property (مطلوب تعيينها)

الخاصية transition-property تقوم بتحديد أي من خصائص CSS داخل القاعدة Rule-set سيتم تطبيق تأثير الإنتقال عليها. بإمكانك استخدام خاصية منفرده مثل background-color أو color أو transform وبإمكانك استخدام الكلمة المفتاحية all ليتم تطبيق تأثير الإنتقال على جميع الخصائص المتعلقة بالعنصر.

القيمة الإفتراضية لها هي none لذلك يجب تعيين قيمة أخرى لها كي تعمل باقي خواص الإنتقال.

جميع الإستخدامات التالية للخاصية transition-property صحيحة:

بما أنه يمكن تطبيق تأثير الإنتقال على خاصية معينة، إذاً يمكننا تطبيق تأثير الإنتقال أكثر مرة على نفس العنصر، كل مرة على خاصية مختلفة بقيم مختلفة.

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

See the Pen CSS Transition #2 by Ashraf Reda (@ashrafreda) on CodePen.

هنا سيتم تطبيق تأثير الإنتقال على الخصائص التالية:

  1. بُعد العنصر من جهة left اليسار في مدة زمنية 1 ثانية بنوع الحركة ease-in-out بدون وقت إنتظار.
  2. لون خلفية العنصر background-color في مدة زمنية 0.5 من الثانية بنوع الحركة الإفتراضي ease ووقت إنتظار 0.5 من الثانية.

 الخاصية transition-duration (مطلوب تعيينها)

تقوم الخاصية transition-duration بتحديد المدة الزمنة لعملية الإنتقال، يمكنك تحديدها بوحدة القياس s ثانية أو ms ملي ثانية (ثانية = ١٠٠٠ ملي ثانية).

القيمة الإفتراضية لها هي صفر، لذلك يجب تعيينها كي تعمل باقي خصائص الإنتقال.

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])
سنتحدث في مقالات لاحقة عن القيم الممكنة لنوع الحركة Timing Function إن شاء الله، وللمزيد من المعلومات الآن عن أنواع الحركة يمكنك تصفح هذا المقال (باللغة الإنجليزية) على شبكة مطورين موزيلا MDN.

الآن دعنا نقوم بتوضيح الفرق بين الأنواع المختلفة للإنتقال بهذا المثال:

See the Pen CSS Transition #4 by Ashraf Reda (@ashrafreda) on CodePen.

الخاصية transition-delay

الخاصية transition-delay تقوم بتحديد مدة الإنتظار قبل بدء الحركة. ويتم قياسها بالثانية أو المللي ثانية وهما وحدتا القياس لأي مدة زمنية.

القيمة الإفتراضية هي صفر، لذلك ستبدأ الحركة مباشرةً دون انتظار أي مدة زمنية قبل بدء الحركة.

See the Pen CSS Transition #5 by Ashraf Reda (@ashrafreda) on CodePen.

ملاحظات وتوضيحات

ليس كل خصائص CSS يمكنك تطبيق تأثير الإنتقال عليها، قامت منظمة W3C بتحديد الخصائص والأنواع التي يمكنك تحريكها في هذة القائمة، أيضاً يمكنك تصفح هذة القائمة بشكل أكثر تنسيقاً في هذا المقال.

هناك مثل مشهور يقول أن كل شيئ زاد عن حده انقلب لضده، وهذا ما يحدث عند الإفراط في استخدام الحركات في صفحة الويب. عند إضافة أي نوع من الحركة إلى المشروع الذي تعمل عليه، ولكي تحافظ عليه بسيطاً ودقيقاً ومتسقاً يجب أن تنقل الحركة التي أضفتها معنى جديد للمستخدم، ولا تشتت انتباهه.
لاحظ أن كثير من الخصائص التي تم إضافتها في الإصدار الثالث من CSS يختلف دعمها من متصفح لآخر، وكل متصفح يستخدم لاحقة Prefix خاصة به، وكي نضمن تطبيق الخاصية على جميع المتصفحات يجب تكررار الخاصية بلاحقة كل متصفح. لكن على سبيل التبسيط سنقوم باستخدام الخاصية القياسية فقط. ويمكنك معرفة، هذة قائمة بلاواحق المتصفحات المختلفة

  • المتصفح Chrome : اللاحقة -webkit-
  • المتصفح Safari : اللاحقة -webkit-
  • المتصفح Firefox : اللاحقة -moz-
  • المتصفح Internet Explorer : اللاحقة -ms-
  • المتصفح Opera : اللاحقة -o-

وتستخدم كالتالي:

هذا الموقع يوضح الخواص التي مازالت تحتاج إلى لواحق والخصائص التي أصبحت قياسية على جميع المتصفحات ويمكنك استخدامها بدون لواحق.

أشرف عبدالدايم

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