animation-iteration-count

ویژگی animation-iteration-count تعیین می کند که یک انیمیشن چند بار برای عنصر انتخاب شده اجرا شود.

مقدار پیشفرض این ویژگی 1 می باشد, به این معنی که انیمیشن یک بار از اول تا آخر اجرا می شود و تکرار وجود نخواهد داشت. همینطور می تواند مقدار infinite داشته باشد, یعنی انیمیشن تا بی نهایت تکرار شود.

می توان تعداد تکرار اجرای یک انیمیشن را بصورت زیر تعیین کرد:

.element {
  animation-iteration-count: 3;
}

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

.element {
  animation-name: bounce, shake, slide;
  animation-duration: 1s, .3s, 500ms;
  animation-iteration-count: 3, infinite, 1;
}

وقتی از این روش برای تعیین تکرار چند انیمیشن بصورت یکجا استفاده می کنید باید توجه داشته باشید که ترتیب آن ها برای تعیین ویژگی های دیگر انیمیشن از قبیل animation-delay, animation-timing-function, animation-duration, animation-name و غیره, اهمیت خواهد داشت.

به عنوان نمونه در مثال بالا انیمیشن bounce مدت 1s به طول می انجامد و 3 بار اجرا می شود و انیمیشن دوم 300 میلی ثانیه طول می کشد و بی نهایت بار تکرار می شود و به همین ترتیب تا آخر مقادیر با هم ارتباط دارند.

تعیین تعداد تکرار انیمیشن برای یک عنصر از طریق روش مختصر نویسی بوسیله ویژگی animation رایج و راحتر است.

در زمان استفاده همزمان از ویژگی های animation-iteration-count و animation-direction باید به این نکته توجه داشت که زمان اجرای از آخر به اول انیمیشن هم یک تکرار محسوب می شود.

در مثال زیر به سه عنصر, انیمیشن زیگزاگ داده شده است. گزینه اول سه بار تکرار می شود و چون جهت انیمیشن به مقدار alternate تنظیم شده است به این معنی است که این عنصر یک زیگزاگ تا آخر انجام می دهد سپس همان حرکت به صورت بالعکس انجام می شود و تکرار آخر هم در جهت اولیه انجام می شود. گزینه دوم هم سه بار تکرار می شود و هر سه تکرار در جهت عادی می باشد و هر دفعه پرش به وضعیت اولیه را داریم. و گزینه سوم هم شبیه به گزینه دوم انجام می شود با این تفاوت که تا بینهایت (infinite) اجرا می شود.

See the Pen animation-iteration-count by Mojtaba Seyedi (@seyedi) on CodePen.

پشتیبانی مرورگر ها