ویژگی animation-duration در CSS

animation Property

ویژگی animation-duration در CSS مدت زمانی را که انیمیشن از ابتدا تا انتها اجرا میشود را مشخص می کند.

نحوه نوشتار

/* انیمیشن تکی */
animation-duration: 6s;
animation-duration: 120ms;

/* چند انیمیشن */
animation-duration: 1.64s, 15.22s;
animation-duration: 10s, 35s, 230ms;

مقادیر

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

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:
(به مقادیر animation-duration در کلاس های cir1, cir2, cir3 ,cir4 توجه نمایید.)

html

<div class="wrapper">
    <div class="anim">
       <div class="cir1">مدت انیمیشن:
                ۴ثانیه
       </div>
    </div>
    <div class="anim">
         <div class="cir2">مدت انیمیشن:
                  ۲ثانیه
         </div>
       </div>
    <div class="anim">
       <div class="cir3">مدت انیمیشن:
                  ۸ثانیه
       </div>
    </div>
</div>

css

.wrapper {
     max-width: 400px;
     margin: 20px auto;
     direction: rtl;
     font-family: 'Segoe UI';
}
.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-name: Anim1;
     animation-duration: 4s;
     animation-timing-function: linear;
     animation-delay: 0s;
     animation-iteration-count: infinite;
     animation-direction: alternate;
}
.cir2 {
     animation-name: Anim1;
     animation-duration: 2s;
     animation-timing-function: linear;
     animation-delay: 0s;
     animation-iteration-count: infinite;
     animation-direction: alternate;
}
.cir3 {
     animation-name: Anim1;
     animation-duration: 8s;
     animation-timing-function: linear;
     animation-delay: 0s;
     animation-iteration-count: infinite;
     animation-direction: alternate;
}
@keyframes Anim1 {
     from {
         margin-right: 0%;
      }
      to {
          margin-right: 70%;
      }
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها بجز Internet Explorer از این سودو کلاس در CSS پشتیبانی می کنند.