Thuộc tính animation-direction

Thuộc tính animation-direction thiết lập hướng của animation. Theo mặc định, animation sẽ lặp lại chỉ 1 lần và sau đó trở về trạng thái ban đầu, sau đó, nếu có thiết lập độ trễ animation-delay, sẽ đợi thời gian quy định và sau đó chu kỳ bắt đầu lại từ đầu.

Thuộc tính này cho phép thay đổi hành vi đó, ví dụ, để animation sau khi kết thúc giữ nguyên ở vị trí nó kết thúc, chứ không nhảy về vị trí bắt đầu.

Cũng có thể thiết lập hành vi như sau: animation sẽ đi đến điểm cuối cùng và quay trở lại (như trong transition). Xem mô tả bên dưới.

Cú pháp

bộ chọn {
	animation-direction: normal | reverse | alternate | alternate-reverse;
}

Các giá trị

Giá trị	Mô tả
`reverse`	Animation sẽ được phát theo hướng ngược lại.
`alternate`	Animation sẽ được phát trước theo hướng thuận, sau đó theo hướng ngược (giống transition).
`alternate-reverse`	Animation sẽ được phát từ vị trí kết thúc về vị trí bắt đầu và ngược lại. Về bản chất đây là sự kết hợp của giá trị `alternate` và `reverse`.
`normal`	Animation sẽ được phát từ đầu đến cuối, và sau khi kết thúc sẽ nhảy ngay về vị trí bắt đầu.

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

Ví dụ

Bây giờ phần tử sẽ di chuyển theo một hướng, và sau đó quay trở lại, vì đã thiết lập giá trị alternate. Đồng thời animation-duration có giá trị 3 giây và điều này có nghĩa là việc di chuyển "đi" và "về" sẽ kéo dài 3 giây mỗi lượt:

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

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

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

Ví dụ

Bây giờ phần tử sẽ di chuyển theo hướng ngược lại (đáng lẽ từ trái sang phải, thì sẽ là từ phải sang trái):

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

@keyframes move {
	from {
		margin-left: 0;
	}
	to {
		margin-left: 400px;
	}
}
			
#elem {
	animation-direction: reverse;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Ví dụ

Bây giờ phần tử sẽ di chuyển đi và về, nhưng theo hướng ngược lại (đáng lẽ bắt đầu từ trái, thì sẽ bắt đầu từ phải):

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

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

#elem {
	animation-direction: alternate-reverse;
	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-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 hiện animation
thuộc tính animation-timing-function,
thiết lập tốc độ thực hiện của 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-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,
đây là cách viết rút gọn cho animation
lệnh @keyframes,
thiết lập các khung hình chính của animation
chuyển tiếp mượt transition, đây là animation khi di chuột vào phần tử