CSS свойство animation-iteration-count

Определение и применение

CSS свойство animation-iteration-count указывает, сколько раз анимация должна быть воспроизведена (сколько раз будет проигрываться анимационный цикл).

Обращаю Ваше внимание на то, что, как правило, удобнее использовать сокращенное обозначение свойства анимации - animation css3 , чтобы установить все свойства анимации в одном объявлении.

Поддержка браузерами

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
animation-iteration-count	43.0 4.0 -webkit-	16.0 5.0 -moz-	30.0 15.0 -webkit-	9.0 4.0 -webkit-	10.0	12.0

CSS синтаксис:

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

JavaScript синтаксис:

object.style.animationIterationCount = "5"

Значения свойства

Значение	Описание
number	Число, которое определяет какое количество раз анимация должна быть воспроизведена (сколько раз будет проигрываться анимационный цикл). Значение по умолчанию 1. Отрицательные значения не допускаются, но при этом допускается использование не целых значений, при этом будет проигрываться только часть анимационного цикла - пропорционально указанному значению (например, значение 1.5 соответствует воспроизведению анимационного цикла полтора раза).
infinite	Указывает, что анимация должна проигрываться бесконечно.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Повторение анимации в CSS</title>
<style> 
div {
width: 50px; /* устанавливаем ширину блока */
height: 50px;  /* устанавливаем высоту блока */
border-radius: 100%;  /* определяем форму углов элемента (скругляем) */
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
color : white; /* устанавливаем цвет шрифта белый */
padding : 15px; /* устанавливаем внутренние отступы элемента со всех сторон */
position: relative;  /* элементы с относительным позиционированием (для возможности смещения) */
text-align: center;  /* выравниваем текст по центру */
line-height: 50px;  /* устанавливаем высоту строки */
animation-duration: 1.5s;  /* задаём продолжительность анимации 1,5 секунды */
animation-name: iliketomoveit;  /* задаём имя анимации (соответствует имени назначенному в ключевых кадрах)  */
} 
.test {
animation-iteration-count: 1;  /* указываем, что анимация будет повторяться 1 раз  */
} 
.test2 {
animation-iteration-count: 2;  /* указываем, что анимация будет повторяться 2 раза  */
} 
.test3 {
animation-iteration-count: 3.5;  /* указываем, что анимация будет повторяться 3 с половиной раза  */
} 
.test4 {
animation-iteration-count: infinite;  /* указываем, что анимация будет повторяться бесконечно  */
} 
@keyframes iliketomoveit {   /* устанавливаем ключевые кадры  */
	0%   {top: 0px;} 
	25%  {top: 200px; background: red;} 
	75%  {top: 100px;} 
	100% {top: 0px; background: black;} 
	} 
</style>
</head>
	<body>
		<div class = "test">1</div>
		<div class = "test2">2</div>
		<div class = "test3">3.5</div>
		<div class = "test4">infinite</div>
	</body>
</html>

CSS свойства