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

Свойството animation-iteration-count задава броя на повторенията на анимацията. По подразбиране анимацията ще се повтори само 1 път и след това ще се върне в първоначалното си състояние. Нашето свойство обаче позволява да се зададе определен брой повторения или дори да се зададе безкрайно повторение.

Синтаксис

селектор {
	animation-iteration-count: цяло или дробно число | infinite;
}

Стойности

Стойност Описание

Число Зададен брой повторения, след изпълнението на които анимацията ще спре. Позицията, която ще заеме, се регулира от свойството animation-fill-mode. Могат да се задават дробни стойности - в този случай анимацията ще се изпълни само частично.

infinite Анимацията ще се повтаря безкрайно.

Стойност	Описание
Число	Зададен брой повторения, след изпълнението на които анимацията ще спре. Позицията, която ще заеме, се регулира от свойството `animation-fill-mode`. Могат да се задават дробни стойности - в този случай анимацията ще се изпълни само частично.
`infinite`	Анимацията ще се повтаря безкрайно.

Стойност по подразбиране: 1.

Пример . Краен брой повторения

В този пример анимацията ще се повтори само 3 пъти, след което ще се върне в първоначалното състояние:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 3;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Пример . Стойност infinite

А сега анимацията ще се повтаря безкрайно:

<div id="elem"></div>

@keyframes move {
	from {
		margin-left: 0px;
	}
	to {
		margin-left: 400px;
	}
}

#elem {
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Вижте също

свойство animation-name,
което задава име на анимацията
свойство animation-duration,
което задава продължителност на анимацията
свойство animation-delay,
което задава забавяне преди изпълнение на анимацията
свойство animation-timing-function,
което задава скорост на изпълнение на анимацията
свойство animation-direction,
което задава посока на анимацията
свойство animation-fill-mode,
което задава състояние на анимацията
свойство animation-play-state,
което позволява поставяне на анимацията на пауза
свойство animation,
което представлява съкращение за анимации
команда @keyframes,
която задава ключови кадри на анимацията
плавни преходи transition, които представляват анимация при посочване на елемент