الفصل 12: الانتقالات والتحولات في CSS

Transition – Transform – الأساسيات بتاعة الأنيميشن

---

✨ أولًا: Transition – الانتقال بين حالتين بهدوء

يعني بدل ما العنصر يتغير شكله فجأة، نخليه يتغير بشكل ناعم تدريجي.

📦 مثال بسيط:

cssCopy code.button {
  background-color: blue;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: red;
}

📌 اللي حصل:

• الزرار لونه أزرق
• لما تقف عليه بالماوس، لونه يبقى أحمر
• بس بدل ما يتغير فجأة، بيتغير في 0.3 ثانية

---

✅ أهم الخصائص مع transition:

الخاصية	معناها
transition-property	بتحدد إيه اللي هيتأثر
transition-duration	الوقت اللي ياخده التغيير (مثلاً: 0.5s)
transition-timing-function	شكل التغيير (بطيء – سريع – منتظم…)
transition-delay	وقت الانتظار قبل ما التغيير يبدأ

---

⏱️ مثال توضيحي كامل:

cssCopy code.card {
  width: 200px;
  background: #eee;
  transition: all 0.4s ease-in-out;
}

.card:hover {
  background: #ccc;
  transform: scale(1.1);
}

---

🔁 ثانيًا: Transform – التحولات في الشكل

الـ transform بتسمحلك تعمل تغييرات في شكل العنصر نفسه:
تكبّره، تصغّره، تلفه، تحرّكه يمين أو شمال… إلخ

---

🔧 أشهر القيم اللي ممكن تستخدمها مع transform:

القيمة	بتعمل إيه؟
translate(x, y)	تحريك العنصر أفقيًا أو رأسيًا
scale(x)	تكبير أو تصغير الحجم
rotate(deg)	لف العنصر بدرجات
skew(x, y)	ميل أو انحراف في الاتجاهات

---

📌 أمثلة عملية:

تكبير العنصر:

cssCopy code.card:hover {
  transform: scale(1.1);
}

تحريكه يمين:

cssCopy code.card:hover {
  transform: translateX(20px);
}

لفه 45 درجة:

cssCopy code.card:hover {
  transform: rotate(45deg);
}

---

🔄 دمج Transition مع Transform:

cssCopy code.image {
  transition: transform 0.3s ease;
}

.image:hover {
  transform: scale(1.2) rotate(5deg);
}

---

🎬 الأساسيات البسيطة للأنيميشن (Animation Basics)

لو عايز تتحكم في حركة متكررة، تقدر تستخدم @keyframes:

cssCopy code@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-30px); }
  100% { transform: translateY(0); }
}

.ball {
  animation: bounce 1s infinite;
}

---

✅ الفرق بين transition و animation:

	transition	animation
بيشتغل إمتى؟	لما يحصل event زي hover	ممكن يشتغل من أول ما الصفحة تفتح
فيه timeline؟	لأ	آه، عندك @keyframes تتحكم في كل خطوة
متكرر؟	لأ	ممكن يتكرر بعدد لا نهائي (infinite)

---

✅ خلاصة الفصل:

• استخدم transition علشان تخلي التغييرات سلسة وناعمة
• استخدم transform علشان تغيّر شكل العنصر (تحريك – لف – تكبير…)
• لو عايز حركة مستمرة، استخدم animation مع @keyframes