CSS - Transitions التحولات
CSS - التحولات (CSS Transitions)
🔸 باستخدام التحولات في CSS، يمكنك جعل التغييرات على خصائص العنصر (مثل اللون أو الحجم) تحدث تدريجيًا بدلًا من أن تكون فورية، مما يضيف نعومة وجمال في التفاعل.
🔹 خاصية transition
الخاصية الأساسية التي تُستخدم لتفعيل التحولات هي:
transition: property duration timing-function delay;
- property: اسم الخاصية (مثل
background-color) - duration: مدة التحول (مثل
0.5s) - timing-function: نمط الحركة (مثل
ease) - delay: تأخير قبل بدء التحول (اختياري)
🧪 مثال على تغيير لون الخلفية تدريجيًا
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 0.5s ease;
}
div:hover {
background-color: blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
📌 عند تمرير الفأرة على العنصر، يتغير لون الخلفية تدريجيًا من الأحمر إلى الأزرق.
🎨 خصائص شائعة يمكن تحريكها
colorbackground-colorwidthوheightmarginوpaddingopacitytransform(مثلscaleوrotate)
🧠 استخدام transition على أكثر من خاصية
div {
transition: width 0.3s ease, background-color 0.5s linear;
}
📌 يمكنك تطبيق التحول على أكثر من خاصية في نفس الوقت.
🔧 تبسيط باستخدام transition: all
div {
transition: all 0.4s ease;
}
📌 يطبق التحول على جميع الخصائص التي يمكن تحريكها، لكنه أقل كفاءة في الأداء من تحديد الخصائص بدقة.
📌 ملاحظات هامة
- التحولات تعمل فقط عند تغيير قيمة الخاصية (مثلاً عند
:hoverأو عند التفاعل مع JavaScript). - لا تعمل التحولات على الخصائص غير القابلة للتحريك (مثل
display). - استخدام
easeأوease-in-outيعطي تأثيرات أكثر نعومة.
تعليقات
إرسال تعليق