خصائص الأنيميشن في CSS - دليل شامل لتحريك عناصر الويب

🎬 خصائص الأنيميشن في CSS: أدواتك لصنع السحر الحركي!

مرحباً بك في عالم التحريك! 🪄 في الدرس السابق، تعلمنا كيف نعرف الحركة (Keyframes) باستخدام قاعدة @keyframes. ولكن تعريف الحركة وحده لا يكفي؛ نحتاج إلى طريقة لتطبيق هذه الحركة على العناصر والتحكم في كيفية تشغيلها. هنا يأتي دور خصائص الأنيميشن (Animation Properties)! هذه الخصائص هي مجموعة من الأدوات التي تخبر المتصفح: "أي حركة ستشغل؟"، "كم ستستمر؟"، "هل تكرر نفسها؟"، وغيرها من التفاصيل الحيوية.

📝 animation-name: ما اسم الحركة التي أريد تشغيلها؟

هذه الخاصية هي نقطة البداية. تخبر المتصفح باسم الحركة التي عرفتها مسبقاً باستخدام @keyframes. يجب أن يتطابق الاسم هنا مع الاسم الذي استخدمته في تعريف @keyframes.

/* الخطوة 1: تعريف الحركة */
@keyframes change-color {
  from { background-color: blue; }
  to { background-color: red; }
}

/* الخطوة 2: تطبيق الحركة على عنصر باستخدام animation-name */
.box {
  animation-name: change-color; /* هنا نربط العنصر بالحركة المسماة 'change-color' */
}

⏱️ animation-duration: كم من الوقت تستغرق الدورة الواحدة؟

بدون تحديد المدة، لن ترى أي حركة! تحدد هذه الخاصية المدة الزمنية التي تستغرقها دورة الحركة الكاملة (من 0% إلى 100%)، وتقاس عادةً بالثواني (s) أو الميلي ثانية (ms).

.box {
  animation-name: change-color;
  animation-duration: 3s; /* الدورة الواحدة ستستغرق 3 ثوان */
}

ملاحظة: القيمة 0s أو 0ms تعني أن الحركة ستحدث فوراً دون مراحل انتقالية.

🎛️ animation-timing-function: كيف تتغير السرعة أثناء الحركة؟

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

.box {
  animation-name: change-color;
  animation-duration: 2s;
  animation-timing-function: ease-in-out; /* تبدأ ببطء، تتسارع في المنتصف، ثم تبطئ في النهاية */
}

قيم شائعة: ease (الافتراضي)، linear (سرعة ثابتة)، ease-in (تبدأ ببطء)، ease-out (تنتهي ببطء)، ease-in-out.

⏳ animation-delay: متى تبدأ الحركة؟

تحدد هذه الخاصية فترة الانتظار قبل أن تبدأ الحركة في التشغيل لأول مرة.

.box {
  animation-name: change-color;
  animation-duration: 2s;
  animation-delay: 1s; /* انتظر لمدة ثانية واحدة، ثم ابدأ الحركة */
}

🔁 animation-iteration-count: كم مرة تكرر الحركة؟

كم عدد المرات التي تريد أن تتكرر فيها دورة الحركة؟ يمكنك استخدام رقم (مثل 2 أو 5) أو الكلمة المفتاحية infinite للتكرار إلى ما لا نهاية.

.box {
  animation-name: change-color;
  animation-duration: 1s;
  animation-iteration-count: 3; /* كرر الحركة 3 مرات ثم توقف */
}

.forever-box {
  animation-name: change-color;
  animation-duration: 1s;
  animation-iteration-count: infinite; /* كرر الحركة إلى الأبد! */
}

↪️ animation-direction: ما اتجاه الحركة في كل تكرار؟

تتحكم هذه الخاصية في اتجاه تشغيل الحركة في كل دورة.

.box {
  animation-name: slide;
  animation-duration: 2s;
  animation-iteration-count: 2;
  animation-direction: alternate; /* الدورة الأولى: من البداية للنهاية. الدورة الثانية: من النهاية للبداية. وهكذا */
}

قيم شائعة: normal (الافتراضي، من البداية للنهاية دائمًا)، reverse (عكس normal)، alternate (يتناوب بين normal و reverse)، alternate-reverse.

🎯 animation-fill-mode: ما هي الحالة النهائية/الابتدائية للعنصر؟

ماذا يحدث لعنصرك قبل أن تبدأ الحركة و بعد أن تنتهي؟ هذه الخاصية تحدد ذلك.

.box {
  animation-name: slide-in;
  animation-duration: 2s;
  animation-fill-mode: forwards; /* بعد انتهاء الحركة، يحتفظ العنصر بقيم الأنماط النهائية للحركة (100%) */
}

قيم شائعة: none (الافتراضي، لا يحتفظ بأي نمط)، forwards (يحتفظ بالنمط النهائي)، backwards (يأخذ النمط الابتدائي أثناء فترة التأخير)، both (يجمع بين backwards و forwards).

⏸️ animation-play-state: تشغيل أو إيقاف الحركة مؤقتاً

تسمح لك هذه الخاصية بتشغيل الحركة أو إيقافها مؤقتاً، وغالباً ما تستخدم مع JavaScript للتحكم التفاعلي.

.box {
  animation-name: spin;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-play-state: paused; /* الحركة متوقفة الآن */
}

.box:hover {
  animation-play-state: running; /* عند المرور بالمؤشر فوق العنصر، تبدأ الحركة */
}

🧩 animation: الاختصار السحري (Shorthand)

بدلاً من كتابة كل خاصية على حدة، يمكنك استخدام الخاصية المختصرة animation لدمج معظم الخصائص السابقة في سطر واحد. الترتيب الموصى به هو: animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state];

/* الطريقة الطويلة */
.box-long {
  animation-name: bounce;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  animation-delay: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* الطريقة المختصرة (نفس النتيجة!) */
.box-short {
  animation: bounce 1s ease-in 0.5s infinite alternate;
}

نصيحة: يمكنك كتابة القيم التي تحتاجها فقط، ولكن يجب الحفاظ على الترتيب، خاصةً للحفاظ على [duration] قبل [delay].