الانتقالات والأنيميشن

30:00 دقيقة مجاني
اليوم موقعك سيتحرك بسلاسة: أزرار تتفاعل، بطاقات تظهر تدريجيًا، وتأثيرات تجعل التصميم أجمل

اجعل موقعك حيًّا بالحركات والتفاعلات ✨

هل لاحظت يومًا أن بعض المواقع تشعرك بالحياة… بينما مواقع أخرى تبدو جامدة ومملة؟

الفرق ليس في الألوان أو الصور فقط، بل في الحركة والتفاعل. في هذا الدرس، سنحوّل موقعك من مجرد صفحة ثابتة إلى تجربة حيّة وممتعة للمستخدم.

  • ✨ أزرار ترتفع عند المرور عليها
  • ✨ بطاقات تظهر بسلاسة
  • ✨ عناصر تتحرك بطريقة طبيعية وجذابة

🎯 هدف هذا الدرس

الهدف بسيط لكنه قوي: أن تجعل التفاعل في موقعك ناعم وسلس بدلًا من تغيّر مفاجئ يزعج المستخدم.

ستتعلم كيف تستخدم الأدوات الأساسية في CSS لإضافة لمسة احترافية على موقعك:

  • 🔹 Transition لإضافة انتقالات سلسة بين الحالات
  • 🔹 Transform لتحريك العناصر بدون كسر التصميم
  • 🔹 Animation لإنشاء حركات احترافية ومتدرجة

💡 نصيحة مهمة

التصميم الاحترافي لا يعني أن كل شيء يتحرك… بل أن كل حركة لها هدف.

ركّز على السلاسة والبساطة، لأن الحركة الزائدة قد تشتت المستخدم بدل أن تساعده.

ماذا ستتعلم بعد هذا الدرس؟

بعد إتقانك لهذه المهارات، لن يصبح موقعك مجرد تصميم جميل فقط، بل سيشعر المستخدم أنه يتفاعل مع شيء حي

وهذا هو الفرق الحقيقي بين موقع عادي… وموقع احترافي.

Transitions مقابل Animations

من المهم جدًا أن تفهم الفرق بين Transitions وAnimations لتستخدم كل واحدة في المكان المناسب.

Transitions

تُستخدم عندما يحدث تغيير بسبب حدث من المستخدم، مثل التمرير بالماوس (hover)، أو التركيز (focus)، أو النقر (active).

مثال عملي:

.btn {
  transition: transform .3s ease, box-shadow .3s ease;
}

.btn:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
}

Animations

تُستخدم لحركات مستمرة أو متعددة المراحل، أو التي تعمل تلقائيًا عند تحميل الصفحة دون الحاجة إلى تفاعل من المستخدم.

مثال عملي:

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.badge {
  animation: pulse 2s infinite ease-in-out;
}

نصيحة سريعة:

  • استخدم Transition للتفاعلات البسيطة والسريعة (مثل رفع زر أو بطاقة عند الـ hover).
  • استخدم Animation للحركات الجذابة والمتكررة مثل تأثيرات التحميل أو النبض.

أهم الخصائص (مع شرح سريع)

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) لتلاحظ الفرق

جرّب نبض (pulse) أو ظهور (slideUp) + تحكم في المدة والتكرار + نسخ CSS

الإعدادات

CSS الناتج

@keyframes ...

ملاحظة: استخدم الحركة بذكاء — مثال: زر عرض خاص/تنبيه/عنصر مهم.

المعاينة

BOX

جرّب تغيير النوع والمدة والتكرار

أمثلة جاهزة مع شرح

زر تفاعلي

هذا المثال يوضح كيف نجعل الزر يتفاعل مع المستخدم بطريقة ناعمة. عند مرور الماوس (hover) يرتفع الزر قليلًا ويكبر، وعند الضغط عليه (active) ينخفض ليعطي إحساسًا حقيقيًا بالضغط.

🔹 transition يجعل الحركة سلسة بدل أن تكون مفاجئة.
🔹 transform يُستخدم لتحريك العنصر وتكبيره بدون كسر التصميم. 

.btn{
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn:hover{ transform: translateY(-6px) scale(1.05); }
.btn:active{ transform: translateY(2px) scale(.98); }

ظهور تدريجي

هذا النوع من الحركات يُستخدم لإظهار العناصر بشكل تدريجي عند تحميل الصفحة، مثل بطاقات المقالات أو المنتجات.

🔹 يبدأ العنصر مخفيًا (opacity: 0) وأسفل قليلًا.
🔹 ثم يتحرك للأعلى ويظهر تدريجيًا حتى يصبح واضحًا بالكامل.

🔹 @keyframes تحدد مراحل الحركة من البداية للنهاية.
🔹 animation تقوم بتشغيل هذه الحركة. 

@keyframes slideUp{
  from{opacity:0; transform:translateY(40px);}
  to{opacity:1; transform:translateY(0);}
}
.card{ animation: slideUp .8s ease-out both; }

نبض بسيط

هذا التأثير يعطي إحساس "نبض" خفيف للعنصر، ويُستخدم عادة لجذب الانتباه إلى عناصر مهمة مثل التنبيهات أو العروض الخاصة.

🔹 العنصر يكبر قليلًا ثم يعود لحجمه الطبيعي بشكل متكرر.
🔹 الحركة تعمل بشكل مستمر باستخدام infinite.

⚠️ يُفضل استخدام هذا التأثير بحذر، لأن كثرة الحركات قد تشتت المستخدم. 

@keyframes pulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.08);}
}
.badge{ animation: pulse 1.8s infinite; }

تمرين (تطبيق عملي)

طبّق التالي على مشروعك:

  1. اختر زر واحد فقط واجعله تفاعلي بـ transition + transform.
  2. أضف حركة ظهور واحدة للبطاقات بـ @keyframes عند التحميل.
  3. لا تستخدم أكثر من حركة مستمرة في نفس الصفحة (لتجنب التشتيت).
  4. استخدم مدة بين 150ms–300ms للأزرار غالبًا.
  5. جرّب ease-out للظهور لأنها “طبيعية” للعين.

خلاصة الدرس

transition + transform + @keyframes

إذا أتقنت هذه الأساسيات، ستضيف سلاسة جميلة لأي واجهة بدون تعقيد.

وبما أنك الآن قد أنهيت هذه الدورة الخاصة بأساسيات CSS فننصحك باستكمال رحلتك التعليمية والبرمجية والذهاب إلى دورة أساسيات JavaScript لتجعل موقعك متفاعلا مع المستخدمين واضافة الانميشن والحركات للصفحة من هنا .

✨ تهانينا! أكملت الدورة العودة للسابق