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


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

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

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

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

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

Нотатка:

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

Синтакс

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
3.0 -webkit-

10.0

16.0
5.0 -moz-

9.0
5.0 -webkit-

12.10
12.0 -o-

12.0

Переглядач
animation-iteration-count

2.0 -webkit-

16.0
5.0 -moz-

9.2
4.0 -webkit-

Приклади


Демонстрації різних значень у дії

Простий приклад роботи властивості

Анімація програватиметься три рази

div { 
  -webkit-animation-iteration-count: 3; /* Chrome, Safari, Opera */ 
  animation-iteration-count: 3; 
}

Додаткові посилання

Всі Коментарі (0)

Зареєструйся на сайті, аби мати змогу залишати коментарі. Зареєструватися  чи
Немає Коментарів