کنترل زمان‌بندی انیمیشن؛ کِی شروع بشه، چقدر طول بکشه، چند بار تکرار بشه

تو درس قبل با @keyframes آشنا شدیم و دیدیم چطور با animation-name و animation-duration یه انیمیشن رو به یه المنت وصل کنیم. اما این فقط شروع ماجراست. حالا می‌خوایم چند ویژگی دیگه رو یاد بگیریم که کنترل دقیق‌تری روی زمان‌بندی انیمیشن بهمون می‌دن: کِی شروع بشه، و چند بار تکرار بشه.

animation-name: وصل کردن keyframe به المنت

این ویژگی همون اسمی هست که تو @keyframes تعریف کردید:

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.box {
  animation-name: slide-in;
}

می‌تونید چند اسم انیمیشن رو هم‌زمان با کاما از هم جدا کنید تا چند انیمیشن مختلف رو هم‌زمان روی یه المنت اجرا کنید:

.box {
  animation-name: slide-in, fade-in;
  animation-duration: 0.6s, 1s;
}

اینجا هر انیمیشن مدت زمان خودش رو داره؛ اولین مقدار animation-duration مال اولین انیمیشن، دومی مال دومی.

animation-duration: چقدر طول بکشه

این ویژگی همونی هست که تو درس قبل دیدیم؛ مدت زمان کامل یک چرخه‌ی انیمیشن رو مشخص می‌کنه:

.box {
  animation-name: slide-in;
  animation-duration: 2s;
}

مقدار پیش‌فرضش 0s هست، پس همیشه باید صریحاً مشخصش کنید.

animation-delay: تأخیر قبل از شروع

گاهی نمی‌خواید انیمیشن همون لحظه‌ی اول شروع بشه؛ می‌خواید چند لحظه صبر کنه. اینجاست که animation-delay به کار میاد:

.box {
  animation-name: fade-in;
  animation-duration: 1s;
  animation-delay: 0.5s;
}

این کد باعث می‌شه المنت نیم ثانیه بعد از لود صفحه، انیمیشن رو شروع کنه. یه نکته‌ی جالب: می‌تونید مقدار منفی هم بدید:

.box {
  animation-name: fade-in;
  animation-duration: 2s;
  animation-delay: -1s;
}

مقدار منفی یعنی انیمیشن انگار از قبل شروع شده و مرورگر مستقیم از وسط (نقطه‌ای که با اون مقدار منفی مطابقت داره) نمایشش رو شروع می‌کنه. این تکنیک تو انیمیشن‌هایی که چند المنت باید هم‌زمان ولی از نقاط مختلف چرخه شروع بشن خیلی کاربرد داره.

animation-iteration-count: چند بار تکرار بشه

به‌طور پیش‌فرض، هر انیمیشن فقط یک بار اجرا می‌شه و بعد متوقف می‌مونه. اگه بخواید بیشتر از یک بار تکرار بشه، از این ویژگی استفاده کنید:

.spinner {
  animation-name: rotate;
  animation-duration: 1s;
  animation-iteration-count: 3;
}

اگه بخواید انیمیشن تا ابد و بی‌نهایت تکرار بشه (مثلاً برای یه لودر یا اسپینر)، از مقدار infinite استفاده کنید:

.spinner {
  animation-name: rotate;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

یه نکته‌ی کمتر شناخته‌شده: این مقدار می‌تونه اعشاری هم باشه. مثلاً animation-iteration-count: 2.5; یعنی انیمیشن دو بار کامل و نیمی از بار سوم رو اجرا می‌کنه و دقیقاً وسط چرخه‌ی سوم متوقف می‌شه.

نوشتن چندتایی برای چند انیمیشن

وقتی چند اسم انیمیشن با کاما جدا می‌کنید، همه‌ی این ویژگی‌ها (duration، delay، iteration-count) هم می‌تونن به همون شکل چندتایی نوشته بشن و به ترتیب با اسم‌ها مچ می‌شن:

.box {
  animation-name: slide-in, pulse;
  animation-duration: 0.5s, 2s;
  animation-delay: 0s, 0.5s;
  animation-iteration-count: 1, infinite;
}

اگه تعداد مقادیر یه ویژگی کمتر از تعداد اسم‌های انیمیشن باشه، مرورگر لیست رو از اول تکرار می‌کنه تا پر بشه. مثلاً اگه سه اسم انیمیشن دارید ولی فقط دو مقدار duration، مقدار سوم دوباره از اولی گرفته می‌شه.

نکته مهم: اگه animation-delay منفی باشه و از animation-duration بزرگ‌تر باشه (مثلاً delay: -3s برای یه انیمیشن 2s)، مرورگر انیمیشن رو مستقیم در حالت پایانی‌اش نمایش می‌ده، انگار همون لحظه‌ی اول تمام شده.

اشتباه رایج: قاطی کردن delay با duration

خیلی از تازه‌کارها فکر می‌کنن animation-delay باعث می‌شه انیمیشن کندتر اجرا بشه؛ در حالی که این دو کاملاً جدا از هم هستن. delay فقط زمان قبل از شروعه، در حالی که duration مدت زمان خود حرکته. تغییر دادن delay هیچ تأثیری روی سرعت انیمیشن نداره.

جمع‌بندی

این چهار ویژگی، ستون فقرات کنترل انیمیشن هستن: animation-name مشخص می‌کنه کدوم keyframe اجرا بشه، animation-duration مدت زمان یک چرخه رو تعیین می‌کنه، animation-delay تأخیر قبل از شروع رو کنترل می‌کنه، و animation-iteration-count تعداد تکرار رو مشخص می‌کنه (با گزینه‌ی infinite برای تکرار بی‌نهایت). تو درس بعدی می‌ریم سراغ ویژگی‌هایی که جهت حرکت و رفتار انیمیشن قبل و بعد از اجرا رو کنترل می‌کنن.