هذا هو المقال الثاني عن جديد CSS3 حيث نتناول CSS3 Transitions. خاصية Transition هى نوع أخر من الحركة البسيطة تشبه Keyframe animations التي تحدثنا عنها في المقال الأول CSS3 Animations و Keyframe animations تتيح المجال للحركات الأكثر تعقيدا و استخدام Transitions مع Keyframe animations يوفر فرصة أفضل لانشاء حركات أعقد بطريقة أسهل

خاصية Transition توفر امكانية التدرج عند تغيير خاصية ما من خصائص عنصر HTML التي قيمتها تساوي رقم أو لون مثل العرض (width) فبدون استخدام Transitions اذا قمنا بتغيير عرض DIV من 50 بكسل إلى 100 بكسل سيتم تغيير عرض العنصر بشكل مفاجئ و في الحال و هذا ينطبق على الخصائص الأخرى كالارتفاع و لون الخلفية و الهامش و غيرهم

[notification type=”notification_warning” ]ملحوظة: لتتمكن من تشغيل الأمثلة التالية التي تستخدم Transitions يجب أن تستخدم متصفح يدعمها و المتصفحات التي تدعم Transitions هى (+IE10+, Chrome 26+, Firefox 16+, Safari 6.1+, Opera 12.1) و بعض هذه المتصفحات كانت تدعم Transitions في نسخ سابقة و لكن باستخدام Vender-Specific Prefixes[/notification] المثال التالي يوضح تغيير العرض عند mouse hover بدون استخدام Transitions [codepen_embed height=”253″ theme_id=”0″ slug_hash=”mrdve” default_tab=”result”]See the Pen Changing Styles Without Transitions by Ahmed Elbaz (@ahmedelbaz) on CodePen.[/codepen_embed] وهذا المثال لنفس المثال السابق و لكن مع Transition لعمل تدرج عند تغيير العرض في مدة 2 ثانية [codepen_embed height=”268″ theme_id=”0″ slug_hash=”vJhKH” default_tab=”result”]See the Pen Changing Styles Without Transitions by Ahmed Elbaz (@ahmedelbaz) on CodePen.[/codepen_embed] [notification type=”notification_warning” ]ملحوظة: ليس كل الخصائص يمكن تطبق Transition عليها و لمراجعة الخصائص المدعمة اضغط هنا[/notification]

خصائص Transitions

transition-property تحديد اسم أو أسماء الخصائص التي نريد تطبيق ال Transition عليها و يمكن استخدام all لتطبيق ال Transition علي كل الخصائص الممكنة transition-duration تحديد مدة ال Transition و ممكن تحديد المدة لكل الخصائص أو مدة مختلفة لكل خاصية transition-delay تحديد مدة الانتظار قبل بدأ الحركة transition-timing-function تطبيق بعض التأثيرات الزمنية أثناء ال Transition مثلا في بداية الحركة تكون سريعة ثم تبطئ في النهاية و الاختيارات المتاحة هى ease و ease-in و ease-out و ease-in-out و linear و (cubic-bezier(n, n, n, n و step-start و step-end و (steps(n و يمكن جمع إعدادات ال Transition في خاصية واحدة (أو shorthand) كالتالي: ;<transition: <property> <duration> <timing-function> <delay

مثال علي استخدام Transitions لانشاء حركة تدرج عند تغيير مجموعة من الخصائص

حاول عمل mouse hover على كل لون بشكل منفصل [codepen_embed height=”191″ theme_id=”0″ slug_hash=”ytFcl” default_tab=”result”]See the Pen <a href=’http://codepen.io/ahmedelbaz/pen/ytFcl/’>CSS3 Transitions</a> by Ahmed Elbaz (<a href=’http://codepen.io/ahmedelbaz’>@ahmedelbaz</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed] و للمزيد من الأمثلة اضغط هنا بالتوفيق]]>