ویژگی animation-iteration-count در CSS

animation-iteration-count Property

ویژگی animation-iteration-count در CSS تعداد دفعات تکرار انیمیشن را مشخص می کند.

نحوه نوشتار

animation-iteration-count: infinite;

animation-iteration-count: 3;
animation-iteration-count: 2.4;

animation-iteration-count: number;

​مقادیر

infinite​

انیمیشن برای همیشه تکرار خواهد شد.

<number>​

تعداد دفعاتی که انیمیشن تکرار خواهد شد. مقدار پیشفرض آن 1 است. میتوانید برای اجرای بخشی از انیمیشن از اعداد اعشاری نظیر 0.5 استفاده کنید که در این مثال نیمی از انیمیشن اجرا خواهد شد. مقادیر منفی نیز غیر مجاز هستند.

در مثال زیر سه انیمیشن با تعداد دفعات متفاوت قرار دارند که به ترتیب infinite ,1.5 ,0 است. انیمیشن با مقدار تکرار infinite برای همیشه تکرار خواهد شد، مقدار 1.5 باعث خواهد تا انیمشین 1 بار بطور کامل و یکبار بطور نصف اجرا شود و در مقدار 0 انیمیشن اجرا نخواهد شد.

html

<div class="wrapper">
   <div class="anim">
       <div class="cir1">
           infinite
       </div>
   </div>
   <div class="anim">
       <div class="cir2">
            1.5
       </div>
   </div>
   <div class="anim">
       <div class="cir3">
            0
       </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: 2s;
   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: 1.5;
   animation-direction: alternate;
}
.cir3 {
   animation-name: Anim1;
   animation-duration: 2s;
   animation-timing-function: linear;
   animation-delay: 0s;
   animation-iteration-count: 0;
   animation-direction: alternate;
}
@keyframes Anim1 {
   from {
      margin-right: 0%;
   }
   to {
      margin-right: 70%;
   }
}

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

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

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