animation-delay

ویژگی animation-delay اجرای یک انیمیشن را به تاخیر می اندازد. در واقع وقتی که انیمیشن به یک عنصر اعمال می شود بعد از مقدار تنظیم شده به این ویژگی اجرا می شود.

مقدار پیشفرض این ویژگی 0s می باشد, به این معنی که انیمیشن بلافاصله بعد از این که به عنصر اعمال می شود, اجرا می شود.

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

.element {
  animation-delay: 3s;
}

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

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

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

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

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

ویژگی animation-delay مقدار منفی هم می تواند داشته باشد. زمانی که مقدار این ویژگی منفی است انیمیشن بلافاصله اجرا می شود و به اندازه مقدار منفی این ویژگی از مدت زمان اجرای انیمیشن کم می شود به این معنی که یک پرش در نمایش انیمیشن خواهیم داشت. مثلا اگر مقدار درنگ 2s- باشد, دو ثانیه اول انیمیشن دیده نخواهد شد.

در مثال زیر به چهار عنصر, انیمیشن زیگزاگ داده شده است و هر عنصر مقدار درنگ متفاوت دارند:

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

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