Thuộc tính animation-fill-mode

Thuộc tính animation-fill-mode thiết lập vị trí dừng của animation sau khi kết thúc. Mặc định, animation sẽ trở về giá trị ban đầu và điều này có thể trông không được đẹp lắm.

Cú pháp

bộ chọn {
	animation-fill-mode: backwards | forwards | both | none;
}

Giá trị

Giá trị	Mô tả
`none`	Nếu có thiết lập độ trễ animation - thì trong suốt thời gian trễ phần tử sẽ đứng yên tại chỗ, sau đó nhảy tới khung hình `0%`. Sau khi animation kết thúc, phần tử sẽ không dừng lại ở trạng thái nơi nó kết thúc, mà nhảy về trạng thái ban đầu.
`backwards`	Buộc phần tử di chuyển ngay sau khi trang tải xong tới khung hình `0%`, ngay cả khi có thiết lập độ trễ `animation-delay`, và giữ nguyên ở đó cho đến khi animation bắt đầu. Sau khi animation kết thúc, phần tử không dừng lại ở trạng thái nơi nó kết thúc, mà nhảy về trạng thái ban đầu.
`forwards`	Chỉ định cho trình duyệt rằng sau khi animation kết thúc, phần tử sẽ dừng lại ở trạng thái nơi nó kết thúc.
`both`	Bao gồm cả backwards và forwards - sau khi trang tải xong phần tử sẽ được đặt về khung hình `0%`, và sau khi animation kết thúc phần tử sẽ dừng lại ở nơi nó kết thúc.

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

Ví dụ . Giá trị none

Trong ví dụ này margin-left được thiết lập là 300px cho phần tử, còn cho khung hình đầu tiên của animation - là 0px. Vì không có độ trễ animation-delay, nên phần tử sau khi trang tải xong sẽ đứng ở 0px, chứ không phải ở 300px. Ngoài ra, animation sau khi kết thúc sẽ nhảy về giá trị ban đầu:

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

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

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Ví dụ . Giá trị none

Trong ví dụ này margin-left được thiết lập là 300px cho phần tử, còn cho khung hình đầu tiên của animation - là 0px. Đồng thời, phần tử được thiết lập độ trễ animation-delay là 3 giây, do đó phần tử sau khi trang tải xong sẽ đứng ở 300px, chứ không phải ở 0px, và sẽ đứng đó 3 giây sau khi animation bắt đầu rồi nhảy tới 0px - và animation sẽ bắt đầu từ đó. Ngoài ra, animation sau khi kết thúc sẽ nhảy về giá trị ban đầu:

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

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

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Ví dụ . Giá trị backwards

Trong ví dụ này margin-left được thiết lập là 300px cho phần tử, còn cho khung hình đầu tiên của animation - là 0px. Đồng thời, phần tử được thiết lập animation-fill-mode là giá trị backwards, do đó phần tử sau khi trang tải xong sẽ đứng ở 0px, chứ không phải ở 300px, như đã từng xảy ra với animation-fill-mode là giá trị none. Ngoài ra, animation sau khi kết thúc sẽ nhảy về giá trị ban đầu:

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

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

#elem {
	margin-left: 300px;
	animation-fill-mode: backwards;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Ví dụ . Giá trị none và số lần lặp bằng 1

Trong ví dụ này margin-left được thiết lập là 300px cho phần tử, còn cho khung hình đầu tiên của animation - là 0px. Đồng thời, phần tử được thiết lập độ trễ animation-delay là 3 giây, do đó phần tử sau khi trang tải xong sẽ đứng ở 300px, chứ không phải ở 0px, và sẽ đứng đó 3 giây sau khi animation bắt đầu rồi nhảy tới 0px - và animation sẽ bắt đầu từ đó. Vì animation-fill-mode được thiết lập là giá trị none, nên sau khi phát xong animation phần tử sẽ trở về giá trị ban đầu:

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

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

#elem {
	margin-left: 300px;
	animation-fill-mode: none;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Ví dụ . Giá trị forwards và số lần lặp bằng 1

Trong ví dụ này animation-fill-mode được thiết lập là giá trị forwards, còn số lần lặp animation - là 1. Sau khi phát xong animation, phần tử sẽ dừng lại ở vị trí mà animation kết thúc, chứ không nhảy về điểm xuất phát ban đầu.

Ngoài ra, margin-left được thiết lập là 300px cho phần tử, còn cho khung hình đầu tiên của animation - là 0px. Đồng thời phần tử được thiết lập độ trễ animation-delay là 3 giây, do đó phần tử sau khi trang tải xong sẽ đứng ở 300px, chứ không phải ở 0px, và sẽ đứng đó 3 giây sau khi animation bắt đầu, rồi nhảy tới 0px - và animation sẽ bắt đầu từ đó:

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

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

#elem {
	margin-left: 300px;
	animation-fill-mode: forwards;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	animation-timing-function: linear;
	border: 1px solid black;
	width: 50px;
	height: 50px;
}

Ví dụ . Giá trị both và số lần lặp bằng 1

Trong ví dụ này animation-fill-mode được thiết lập là giá trị both, còn số lần lặp animation - là 1. Sau khi trang tải xong, phần tử sẽ đứng ở khung hình đầu tiên của animation (ở 0px, chứ không phải ở 300px), còn sau khi phát xong animation phần tử sẽ dừng lại ở vị trí mà animation kết thúc, chứ không nhảy về điểm xuất phát ban đầu:

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

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

#elem {
	margin-left: 300px;
	animation-fill-mode: both;
	animation-delay: 3s;
	animation-duration: 3s;
	animation-name: move;
	animation-iteration-count: 1;
	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 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-play-state,
cho phép tạm dừng animation
thuộc tính animation,
là dạng viết tắt 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 mà transition, là animation khi di chuột vào phần tử