CSS - Animations الرسوم المتحركة

CSS - الرسوم المتحركة (CSS Animations)

🔸 تتيح خاصية الرسوم المتحركة (animation) في CSS إمكانية تحريك العناصر من حالة إلى أخرى عبر سلسلة من الإطارات الزمنية دون الحاجة إلى JavaScript.

🔹 أهم خصائص animation

• animation-name: اسم الحركة (يُعرّف باستخدام @keyframes).
• animation-duration: مدة الحركة (مثل 2s).
• animation-delay: تأخير قبل بدء الحركة.
• animation-iteration-count: عدد مرات تكرار الحركة.
• animation-direction: اتجاه الحركة (normal, reverse, alternate...).
• animation-timing-function: نوع التدرج في السرعة (ease, linear...).
• animation-fill-mode: كيف يظهر العنصر قبل/بعد الحركة.

🧪 مثال بسيط: تغيير لون الخلفية

@keyframes changeColor {
  from {background-color: red;}
  to {background-color: yellow;}
}

div {
  width: 100px;
  height: 100px;
  animation-name: changeColor;
  animation-duration: 2s;
}

<div></div>

🧪 مثال: حركة ذهاب وعودة باستخدام alternate

@keyframes move {
  0%   {left: 0;}
  50%  {left: 100px;}
  100% {left: 0;}
}

div {
  position: relative;
  width: 50px;
  height: 50px;
  background: blue;
  animation: move 3s infinite alternate;
}

🧪 استخدام اختصار animation

div {
  animation: move 3s ease-in-out 1s infinite alternate;
}

📌 هذا يعادل كتابة جميع الخصائص في سطر واحد بالترتيب: name duration timing-function delay iteration-count direction

📌 ملاحظات هامة

• استخدم @keyframes لتعريف التسلسل الزمني للحركة.
• يمكنك استخدام النسب المئوية 0% - 100% أو from - to.
• لإيقاف الحركة بعد مرة واحدة، استخدم animation-iteration-count: 1;.
• للحفاظ على الشكل النهائي بعد الحركة، استخدم animation-fill-mode: forwards;.