css властивість animation-iteration-count
Властивість animation-iteration-count визначає скільки разів програвати цикл анімації до її зупинки.
Наприклад, якщо задати для властивості значення 5 - анімація програватиметься 5 циклів.
Значення infinite робить демонстрацію анімації нескінченною.
Якщо для властивості прописано більше за одне значення, кожен раз коли програється анімація, використовується наступне у списку значення по черзі. Після останнього значення, браузер повертається до першого.
На цьому прикладі, ми можемо побачити, що блок з animation-iteration-count: 2; зупиняється, а блок з animation-iteration-count: 15; продовжує ще програватися:
| Нотатка: | Рекомендується використовувати універсальну властивість |
Синтаксис
animation-iteration-count: number|infinite|initial|inherit;Властивість animation-iteration-count може отримувати 4 значення:
numberСкільки разів повинна повторюватися анімація. Негативні значення не припустимі. Можна використовувати числа менше одиниці, для прикладу 0.5 означатиме половину циклу анімації
infiniteАнімація повторюється нескінченно
initialВстановлює властивість у значення без задання
inheritВказує на спадковість властивостей від свого батьківського елемента
| Значення без задання: | 1 |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.animationIterationCount="infinite" |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| animation-iteration-count | 43.0 |
10.0 |
16.0 |
9.0 |
12.10 |
12.0 |
| Переглядач | |||
|---|---|---|---|
| animation-iteration-count | 2.0 -webkit- |
16.0 |
9.2 |
Мобільних переглядачів ще не додано.
Приклади
Демонстрації різних значень у дії
Простий приклад роботи властивості
Анімація програватиметься три рази
div {
-webkit-animation-iteration-count: 3; /* Chrome, Safari, Opera */
animation-iteration-count: 3;
}