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 پشتیبانی می کنند.