دورة أساسيات لغة css للمبتدئين ( شرح خاصية transition )

خاصية transition في css3 مهمة جدا بل لا غنى عنها لمصممي الويب، قبل اعتمادها كانت التأثيرات التي تظهر في حالات hover و focus عادية جدا، وفي حالة ما إذا أراد مصمم إضافة بعض الجمالية عليها كأن تظهر على شكل animation، فسيحتاج إلى كثير من التعقيدات بالجافاسكريبت، بعد ظهور css3 التي سهلت الكثير من الأمور التي كانت تحتاج إلى جافاسكريبت، أصبح الموضوع كله متوقفا على بضع خصائص تكتبها في ملف css للعنصر ثم تكتب تأثيرات الهوفر، لاحظ الكود التالي:

في حالتنا هذه عند تمرير الماوس على العنصر h1 سيكبر حجم الخط ويتغير اللون ، ولكن بفضل transition التي كتبت للعنصر نفسه لن يظهر التغيير بشكل فوري ، سيتغير ظهور h1 في ظرف ثانية واحدة وهي القيمة التي وضعنا ل transition-duration وسينتظر أيضا ثانية أخرى قبل بدء مرحلة التغيير وهي القيمة الموضوعة ل transition-delay.

 شرح خصائص transition 

خاصية transition-property : 

وتحدد خاصية css التي ستطبق عليها transition فنكتب لها كقيمة مثلا width أو font-size أو أي خاصية أخرى وإذا أردنا التطبيق على الكل فقط نكتب all كما في الصورة أعلاه.

خاصية transition-duration : 

وهي المدة الزمنية التي يحول فيها العنصر من الحالة العادية إلى حالة الهوفر أو الفوكس وتكتب لها القيمة بالثانية أو أجزاء الثانية.

خاصية transition-timing-function : 

تحدد الطريقة التي ستنفذ بها قيم transition المحسوبة وتأخد قيم متعددة ، ease أو ease-in أو ease-out أو ease-in-out وتأخد أيضا قيم أخرى معقدة لا حاجة إليها.

خاصية transition-duration : 

مدة زمنية تفرض كتوقف وانتظار قبل بدء transition وبعد انتهائها قبل العودة للوضع الطبيعي .

لا تقلق فكل هذا مشروح بشكل عملي في فيديو على قناتنا عالم التصميم والبرمجة ، وهذا هو الفيديو :