animation-iteration-count 속성

animation-iteration-count 속성은 애니메이션의 반복 횟수를 설정합니다. 기본적으로 애니메이션은 1번만 반복된 후 원래 상태로 돌아갑니다. 이 속성을 사용하면 특정 횟수만큼 반복하거나 무한 반복을 설정할 수 있습니다.

문법

선택자 {
	animation-iteration-count: 정수 또는 소수 | 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-iteration-count 속성

문법

값

예제 . 유한한 반복 횟수

예제 . infinite 값

관련 항목