ویژگی animation-delay در CSS

animation-delay Property

ویژگی animation-delay در CSS زمان شروع اجرای انیمیشن را مشخص می کند. انیمیشن می تواند با تاخیر، بلافاصله از آغاز و یا از میان انیمیشن شروع شود.

نحوه نوشتار

animation-delay: 3s;
animation-delay: 0s;
animation-delay: -1500ms;

animation-delay: 2.1s, 480ms;

مقادیر

بازه زمانی که انیمیشن به عنصر اعمال می شود و تا زمانی که انیمیشن شروع میشود را تاخیر در انیمیشن می نامیم. این مقادیر معمولا با دو واحد ثانیه (s) و میلی ثانیه (ms) اعمال می شوند. مقدار مثبت نشان میدهد که انیمیشن بعد از سپری شدن مقدار داده شده از زمان شروع خواهد شد. مقدار 0s که بصورت پیشفرض وجود دارد، نشان می دهد که انیمیشن بابد بلافاصله بعد از اعمال شدن، آغاز شود.

مقدار منفی سبب می شود که انیمیشن بلافاصله شروع شود، اما در میانه سیکل انیمیشن. برای مثال اگر مقدار 1s- بدهیم، انیمیشن بلافاصله شروع به حرکت خواهد کرد اما در واقع از 1 ثانیه بعد از توالی انیمیشن شروع خواهد شد.

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:

html

<div class="wrapper">
   <div class="anim1">
      <div class="cir1">بدون تاخیر</div>
   </div>
   <div class="anim2">
      <div class="cir2">با 2 ثانیه تاخیر</div>
   </div>
   <div class="anim3">
      <div class="cir3">با 1- ثانیه تاخیر</div>
   </div>
</div>

css

.wrapper {
      max-width: 400px;
      margin: 20px auto;
      direction: rtl;
      font-family: 'Segoe UI';
}
[class*="anim"] {
      padding: 10px 0;
      background-color: #f3f3f3;
      margin-bottom: 10px;
}
[class*="cir"] {
      width: 110px;
      height: 110px;
      background-color: dodgerblue;
      color: #ffffff;
      border: 3px solid #000000;
      border-radius: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
}
.cir1 {
      animation: 4s linear 0s 2 alternate Anim1;
}
.cir2 {
      animation: 4s linear 2s 2 alternate Anim2;
}
.cir3 {
      animation: 4s linear -2s 2 alternate Anim2;
}
 @keyframes Anim1 {
      from {
        margin-right: 0%;
        color: #000000;
        background: orange;
      }
      to {
        margin-right: 70%;
        color: #000000;
        background: orange;
      }
}
@keyframes Anim2 {
      from {
        margin-right: 0%;
        color: #000000;
        background: orange;
      }
      to {
        margin-right: 70%;
        color: #000000;
        background: orange;
      }
}
@keyframes Anim3 {
      from {
        margin-right: 0%;
        color: #000000;
        background: orange;
      }
      to {
        margin-right: 70%;
        color: #000000;
        background: orange;
      }
}

توجه داشته باشید که انیمیشن زیر به هنگام لود شدن صفحه اجرا می شود، لذا برای مشاهده دوباره انیمیشن می توانید دکمه ریلود در پنجره پایین را کلیک نمایید.