css властивість animation-iteration-count

Властивість animation-iteration-count визначає скільки разів програвати цикл анімації до її зупинки.

Наприклад, якщо задати для властивості значення 5 - анімація програватиметься 5 циклів.

Значення infinite робить демонстрацію анімації нескінченною. Якщо для властивості прописано більше за одне значення, кожен раз коли програється анімація, використовується наступне у списку значення по черзі. Після останнього значення, браузер повертається до першого.

На цьому прикладі, ми можемо побачити, що блок з animation-iteration-count: 2; зупиняється, а блок з animation-iteration-count: 15; продовжує ще програватися:

правити

Нотатка

Рекомендується використовувати універсальну властивість animation, щоб задавати всі властивості відразу в одному місці. Це робить стилі більш зрозумілішими та зменшує їхній обсяг.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

animation-iteration-count: number|infinite|initial|inherit;

Властивість animation-iteration-count може отримувати 4 значень:

number

Скільки разів повинна повторюватися анімація. Негативні значення не припустимі. Можна використовувати числа менше одиниці, для прикладу 0.5 означатиме половину циклу анімації

автор: Svitlana

правити

infinite

Анімація повторюється нескінченно

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання

автор: Svitlana

правити

inherit

Вказує на спадковість властивостей від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
animation-iteration-count	43.0 <br> 3.0 -webkit-	16.0 <br> 5.0 -moz-	9.0 <br> 5.0 -webkit-	12.10 <br> 12.0 -o-	12.0	10.0

Підтримка: мобільні переглядачі

Переглядач
animation-iteration-count	2.0 -webkit-	16.0 <br> 5.0 -moz-	9.2 <br> 4.0 -webkit-

Приклади

+ запропонувати свій приклад у пісочниці

<div class="box three">3 рази</div>
<div class="box forever">infinite</div>

.box {
    width: 200px;
    padding: 8px;
    margin-bottom: 8px;
    color: #fff;
    position: relative;
    animation: mymove 2s;
}

.three {
    animation-iteration-count: 3;
    background: #0172ad;
}

.forever {
    animation-iteration-count: infinite;
    background: #d81b60;
}

@keyframes mymove {
    from { left: 0; }
    to   { left: 160px; }
}