🎬 التحكم في توقيت الحركات CSS Animation Timing: سر الإتقان

مرحباً بك! في دروسنا السابقة، تعلمنا أساسيات إنشاء الحركات باستخدام @keyframes وخاصية animation-name. اليوم، سنتعمق في أحد أهم الجوانب التي تحول الحركة البسيطة إلى حركة احترافية: التوقيت. التحكم في توقيت الحركة هو ما يمنحها الإحساس بالواقعية والسلاسة. هيا نبدأ!

⏱️ الخاصية animation-duration: كم تستغرق الحركة؟

تحدد خاصية animation-duration المدة الزمنية التي تستغرقها دورة الحركة الواحدة لإكمالها. بمعنى آخر، هي التي تقرر إذا كانت الحركة سريعة أم بطيئة.

القيمة: تقبل القيمة بالثواني (s) أو ميلي ثانية (ms).

  • 1s تعني ثانية واحدة.
  • 500ms تعني نصف ثانية (500 ميلي ثانية = 0.5 ثانية).

مثال عملي: لنفترض أن لدينا مربعاً نريد تحريكه من اليسار إلى اليمين خلال ثانيتين.

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  /* تطبيق الحركة */
  animation-name: move-right;
  animation-duration: 2s; /* الحركة ستستغرق ثانيتين */
}

@keyframes move-right {
  from { transform: translateX(0); }
  to   { transform: translateX(300px); }
}

في هذا المثال، سيستغرق المربع زمناً قدره ثانيتين للانتقال من نقطة البداية (translateX(0)) إلى نقطة النهاية (translateX(300px)).

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

تحدد خاصية animation-delay فترة الانتظار قبل أن تبدأ الحركة. هذه الخاصية مفيدة جداً عندما تريد إنشاء تسلسل لحركات متعددة.

القيمة: مثل animation-duration، تقبل القيمة بالثواني (s) أو ميلي ثانية (ms). يمكن أن تكون القيمة صفراً (0s) أو أي رقم موجب.

مثال عملي: لنضف تأخيراً لمربعنا لمدة نصف ثانية قبل أن يبدأ بالتحرك.

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  animation-name: move-right;
  animation-duration: 2s;
  animation-delay: 0.5s; /* انتظر نصف ثانية قبل البدء */
}

@keyframes move-right {
  from { transform: translateX(0); }
  to   { transform: translateX(300px); }
}

الآن، بعد تحميل الصفحة، سينتظر المربع نصف ثانية ثم يبدأ حركته التي ستستمر لمدة ثانيتين.

📈 الخاصية animation-timing-function: كيف تتغير السرعة؟

هذه هي الخاصية الأكثر تأثيراً على طبيعة الحركة. فهي لا تتحكم في السرعة الإجمالية، بل في كيفية توزيع السرعة خلال مدة الحركة. هل تبدأ ببطء ثم تزيد سرعتها؟ أم تكون سرعتها ثابتة؟ هذا ما تحدده animation-timing-function.

القيم الشائعة (الكلمات المفتاحية):

  1. ease (الإعداد الافتراضي): تبدأ ببطء، ثم تسرع، ثم تبطئ مرة أخرى في النهاية. هذا هو الخيار الأكثر طبيعية.
  2. linear: تتحرك بسرعة ثابتة من البداية إلى النهاية. تشبه حركة الروبوت.
  3. ease-in: تبدأ ببطء، ثم تصل إلى سرعة عالية في النهاية.
  4. ease-out: تبدأ بسرعة، ثم تبطئ نحو النهاية.
  5. ease-in-out: تبدأ ببطء، تتسارع في المنتصف، ثم تبطئ في النهاية. مشابهة لـ ease ولكن بشكل أكثر تناسقاً.

مثال عملي: لنجرب تأثير القيم المختلفة على مربعنا.

.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  animation-name: move-right;
  animation-duration: 2s;
  /* جرب تغيير القيمة لترى الفرق */
  animation-timing-function: ease-in-out;
}

@keyframes move-right {
  from { transform: translateX(0); }
  to   { transform: translateX(300px); }
}

نصيحة: افتح محرر الأكواد وحاول تغيير قيمة animation-timing-function إلى كل من الخيارات المذكورة أعلاه وشاهد الفرق الكبير في الشعور الذي تمنحه كل حركة!

🧩 دمج الخصائص معاً (animation Shorthand)

لجعل الكود أكثر نظافة واختصاراً، يمكننا استخدام الخاصية المختصرة animation لدمج جميع الخصائص التي تعلمناها في سطر واحد.

ترتيب القيم في الخاصية المختصرة هو: animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode];

لا تقلق، لا نحتاج لكتابة كل هذه الخصائص الآن. نكتب فقط ما نستخدمه.

مثال: بدلاً من كتابة هذا:

.box {
  animation-name: move-right;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
}

يمكننا كتابة هذا بكفاءة أعلى:

.box {
  animation: move-right 2s ease-in-out 0.5s;
}

يجب الحفاظ على الترتيب بين duration و delay. المدة (2s) تأتي أولاً ثم التأخير (0.5s).

🎯 خلاصة الدرس

تعلمنا اليوم كيف نتحكم في قلب أي حركة: التوقيت.

  • animation-duration تحكم في المدة الإجمالية للحركة.
  • animation-delay تضيف تأخيراً قبل بدء الحركة.
  • animation-timing-function تحدد نمط التسارع والإبطاء، مما يمنح الحركة شخصيتها الفريدة.
  • الخاصية المختصرة animation تساعدنا في كتابة كود أنظف وأقصر.