Thuộc tính animation-duration

Thuộc tính animation-duration thiết lập thời gian thực hiện animation.

Cú pháp

bộ chọn {
	animation-duration: thời gian theo s hoặc ms;
}

Giá trị

Giá trị	Mô tả
`s`	Chỉ định thời gian theo giây (ví dụ `3s`).
`ms`	Chỉ định thời gian theo mili giây (ví dụ `3ms`). Một giây bằng `1000` mili giây.

Giá trị mặc định: 0s.

Ví dụ

Trong ví dụ này, animation sẽ được phát trong vòng 3 giây:

<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 cho animation
thuộc tính animation-delay,
thiết lập độ trễ trước khi thực hiện animation
thuộc tính animation-timing-function,
thiết lập tốc độ thực hiện animation
thuộc tính animation-iteration-count,
thiết lập số lần lặp 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,
viết tắt cho các thuộc tính animation
lệnh @keyframes,
thiết lập các khung hình chính cho animation
các hiệu ứng chuyển tiếp mượt transition, là hiệu ứng animation khi di chuột qua phần tử