Thuộc tính animation-iteration-count

Thuộc tính animation-iteration-count thiết lập số lần lặp lại của animation. Theo mặc định animation chỉ lặp lại 1 lần và sau đó trở về trạng thái ban đầu. Thuộc tính của chúng ta, tuy nhiên, cho phép thiết lập một số lần lặp lại cụ thể hoặc thậm chí thiết lập lặp lại vô hạn.

Cú pháp

bộ chọn {
	animation-iteration-count: số nguyên hoặc số thập phân | infinite;
}

Giá trị

Giá trị	Mô tả
Số	Số lần lặp lại đã thiết lập, sau khi thực hiện xong animation sẽ dừng. Vị trí mà nó sẽ chiếm giữ được điều chỉnh bởi thuộc tính `animation-fill-mode`. Có thể thiết lập giá trị thập phân - trong trường hợp này animation sẽ chỉ phát một phần.
`infinite`	Animation sẽ lặp lại vô hạn.

Giá trị mặc định: 1.

Ví dụ . Số lần lặp lại hữu hạn

Trong ví dụ này animation sẽ chỉ lặp lại 3 lần, sau đó trở về trạng thái ban đầu:

<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;
}

Ví dụ . Giá trị infinite

Và bây giờ animation sẽ lặp lại vô hạn:

<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;
}

Xem thêm

thuộc tính animation-name,
thiết lập tên của animation
thuộc tính animation-duration,
thiết lập thời lượng của animation
thuộc tính animation-delay,
thiết lập độ trễ trước khi thực thi animation
thuộc tính animation-timing-function,
thiết lập tốc độ thực thi của animation
thuộc tính animation-direction,
thiết lập hướng của animation
thuộc tính animation-fill-mode,
thiết lập trạng thái của animation
thuộc tính animation-play-state,
cho phép tạm dừng animation
thuộc tính animation,
đại diện cho dạng viết tắt cho các animation
lệnh @keyframes,
thiết lập các khung hình chính của animation
các chuyển tiếp mượt mà transition, đại diện cho animation khi di chuột lên phần tử