animation-iteration-count¶
Свойство animation-iteration-count
определяет, сколько раз проигрывать цикл анимации до её остановки.
Переходы и Анимации
Синтаксис¶
animation-iteration-count: infinite;
animation-iteration-count: 3;
animation-iteration-count: 2.3;
animation-iteration-count: 2, 0, infinite;
Значения¶
infinite
- Анимация повторяется бесконечно.
<число>
- Сколько раз должна повторяться анимация. Отрицательные значения не допустимы. Можно использовать числа меньше единицы, для примера 0.5 будет означать половину цикла анимации.
Значение по-умолчанию:
animation-iteration-count: 1;
Применяется ко всем элементам, к псевдоэлементам ::before
и ::after
Спецификации¶
Поддержка браузерами¶
Описание и примеры¶
<!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>
В данном примере установлено бесконечное мигание выбранного текста.
Примечание¶
- Chrome, Safari и Android поддерживают свойство
-webkit-animation-iteration-count
. - Opera до версии 12.10 поддерживает свойство
-o-animation-iteration-count
. - Firefox до версии 16 поддерживает свойство
-moz-animation-iteration-count
.