animation-iteration-count

Содержание

Свойство определяет, сколько раз проигрывать цикл анимации до её остановки.

Краткая информация

Значение по умолчанию1
НаследуетсяНет
ПрименяетсяКо всем элементам, к псевдоэлементам ::before и ::after

Синтаксис

animation-iteration-count: infinite | <число>

Значения

infinite
Анимация повторяется бесконечно.
<число>
Сколько раз должна повторяться анимация. Отрицательные значения не допустимы. Можно использовать числа меньше единицы, для примера 0.5 будет означать половину цикла анимации.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>animation-iteration-count</title>
  <style>
   .blink {	
    -webkit-animation: blink 1s;
    -webkit-animation-iteration-count: infinite;
    animation: blink 1s;
    animation-iteration-count: infinite;
   }
   @-webkit-keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
   }
   @keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
   }
  </style>
 </head>
 <body>
  <div class="blink">Мигающий текст привлекает к себе внимание, не правда ли.</div>
 </body>
</html>

В данном примере установлено бесконечное мигание выбранного текста.

Объектная модель

объект.style.animationIterationCount

Примечание

Chrome, Safari и Android поддерживают свойство -webkit-animation-iteration-count.

Opera до версии 12.10 поддерживает свойство -o-animation-iteration-count.

Firefox до версии 16 поддерживает свойство -moz-animation-iteration-count.

Спецификация

СпецификацияСтатус
CSS AnimationsРабочий проект

Браузеры

Internet ExplorerChromeOperaSafariFirefox
1031212.104516
AndroidFirefox MobileOpera MobileSafari Mobile
25161212.104




Рекомендую хостинг: beget.ru

Сервер падал:54 дн. 13:05 назад.

Посещений в месяц:205640

Посещений в день:100


+7 (951) 527 0204

+7 (928) 103 4987

programmer@niesoft.ru