الانتقالات والأنيميشن
هدف هذا الدرس: تجعل التفاعل في موقعك "طبيعي" بدل ما يكون تغيّر مفاجئ.
Transition
انتقال بين حالتين (مثل hover)
Transform
تحريك/تكبير/تدوير دون كسر التخطيط
Animation
حركة مستمرة أو بمراحل (@keyframes)
نصيحة: ركّز على السلاسة والبساطة — الحركة الزائدة تشتت المستخدم.
Transitions مقابل Animations
Transitions
تُستخدم عندما يحدث تغيير "بسبب حدث": مثل hover / focus / active.
.btn {
transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-4px); }Animations
تُستخدم لحركة "مستمرة" أو "بمراحل" أو "تشتغل تلقائيًا" عند فتح الصفحة.
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
.badge { animation: pulse 1.8s infinite; }أهم الخصائص (مع شرح سريع)
transition
يحدد: ماذا يتحول؟ وكم المدة؟ وما نوع السلاسة (timing).
مثال: transition: transform .2s ease;
transform
يحرك/يكبر/يدور العنصر بدون تغيير “تخطيط الصفحة”.
أمثلة: translate / scale / rotate
@keyframes
يعرّف “مراحل الحركة” من 0% إلى 100%.
تستخدمه مع animation
animation
يشغّل الحركة: اسمها، مدتها، تكرارها، ونوعها.
مثال: animation: slideUp .8s ease-out forwards;
ease / cubic-bezier
“إحساس الحركة” (مثل طبيعي/سريع/مرن). cubic-bezier يعطيك تحكم أدق.
نصيحة: استخدم ease-out للظهور غالبًا.
نصيحة أداء
الأفضل تحريك: transform + opacity لأنها أخف على المتصفح مقارنة بتحريك width/height.
Transitions Playground
غيّر المدة والـ easing وشوف الزر يتفاعل فورًا + انسخ CSS
هذا قسم: الإعدادات
هذا قسم: CSS الناتج
.btn { transition: ... }✅ تم النسخ
ملاحظة: الأفضل تحدد الخصائص بدل transition: all لتحسين الأداء.
هذا قسم: المعاينة
مرّر الفأرة على الزر ثم اضغطه (active) لتلاحظ الفرق
Animations Playground
جرّب نبض (pulse) أو ظهور (slideUp) + تحكم في المدة والتكرار + نسخ CSS
هذا قسم: الإعدادات
هذا قسم: CSS الناتج
@keyframes ...✅ تم النسخ
ملاحظة: استخدم الحركة بذكاء — مثال: زر عرض خاص/تنبيه/عنصر مهم.
هذا قسم: المعاينة
جرّب تغيير النوع والمدة والتكرار
هذا قسم: أمثلة جاهزة مع شرح
زر تفاعلي
انتقال عند hover + ضغط عند active.
.btn{
transition: transform .25s ease, box-shadow .25s ease;
}
.btn:hover{ transform: translateY(-6px) scale(1.05); }
.btn:active{ transform: translateY(2px) scale(.98); }ظهور تدريجي
مناسب لبطاقات المقالات أو المنتجات عند التحميل.
@keyframes slideUp{
from{opacity:0; transform:translateY(40px);}
to{opacity:1; transform:translateY(0);}
}
.card{ animation: slideUp .8s ease-out both; }نبض بسيط
استخدمه لإبراز عنصر مهم (بدون مبالغة).
@keyframes pulse{
0%,100%{transform:scale(1);}
50%{transform:scale(1.08);}
}
.badge{ animation: pulse 1.8s infinite; }تمرين (تطبيق عملي)
طبّق التالي على مشروعك:
- اختر زر واحد فقط واجعله تفاعلي بـ transition + transform.
- أضف حركة ظهور واحدة للبطاقات بـ @keyframes عند التحميل.
- لا تستخدم أكثر من حركة مستمرة في نفس الصفحة (لتجنب التشتيت).
- استخدم مدة بين 150ms–300ms للأزرار غالبًا.
- جرّب ease-out للظهور لأنها “طبيعية” للعين.
خلاصة الدرس
transition + transform + @keyframes
إذا أتقنت هذه الأساسيات، ستضيف سلاسة جميلة لأي واجهة بدون تعقيد.
وبما أنك الآن قد أنهيت هذه الدورة الخاصة بأساسيات CSS فننصحك باستكمال رحلتك التعليمية والبرمجية والذهاب إلى دورة أساسيات JavaScript لتجعل موقعك متفاعلا مع المستخدمين واضافة الانميشن والحركات للصفحة من هنا .