Својство 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, кои претставуваат анимација при преминување на елементот