هذا هو المقال الثاني عن جديد CSS3 حيث نتناول CSS3 Transitions.

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

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

المثال التالي يوضح تغيير العرض عند mouse hover بدون استخدام Transitions

See the Pen Changing Styles Without Transitions by Ahmed Elbaz (@ahmedelbaz) on CodePen.0

وهذا المثال لنفس المثال السابق و لكن مع Transition لعمل تدرج عند تغيير العرض في مدة 2 ثانية

See the Pen Changing Styles Without Transitions by Ahmed Elbaz (@ahmedelbaz) on CodePen.0

خصائص 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 على كل لون بشكل منفصل

See the Pen CSS3 Transitions by Ahmed Elbaz (@ahmedelbaz) on CodePen.0

و للمزيد من الأمثلة اضغط هنا

بالتوفيق