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

CSS свойства

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

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

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

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

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
animation-iteration-countcss343.0
4.0
-webkit-
16.0
5.0
-moz-
30.0
15.0
-webkit-
9.0
4.0
-webkit-
10.012.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 свойства animation-iteration-count (повторение анимации).
Пример использования CSS свойства animation-iteration-count (повторение анимации).
CSS свойства