Thuộc tính animationFillMode được dùng để chỉ định cách các kiểu CSS được áp dụng cho phần tử bên ngoài thời gian thực thi hoạt ảnh — tức là trước khi hoạt ảnh bắt đầu (nếu có độ trễ) và sau khi hoạt ảnh kết thúc. Điều này rất hữu ích khi bạn muốn giữ nguyên kiểu dáng của khung hình đầu tiên hoặc cuối cùng.
Cú pháp
Để thiết lập thuộc tính animationFillMode:
object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"
Các giá trị
| Giá trị | Mô tả |
|---|---|
| none | Hoạt ảnh không áp dụng bất kỳ kiểu nào cho phần tử trước khi bắt đầu hoặc sau khi kết thúc. Đây là giá trị mặc định. |
| forwards | Áp dụng kiểu của khung hình cuối cùng (100% hoặc to) cho phần tử sau khi hoạt ảnh kết thúc. |
| backwards | Áp dụng kiểu của khung hình đầu tiên (0% hoặc from) cho phần tử trong khoảng độ trễ trước khi hoạt ảnh bắt đầu. |
| both | Kết hợp cả forwards và backwards: áp dụng kiểu khung hình đầu tiên trong độ trễ và giữ kiểu khung hình cuối cùng sau khi kết thúc. |
| initial | Đặt thuộc tính về giá trị mặc định. |
| inherit | Kế thừa giá trị từ phần tử cha. |
Ví dụ
Dưới đây là ví dụ minh họa cho thuộc tính animationFillMode:
<!DOCTYPE html> <html> <head> <style>
div {
height: 30px;
width: 30px;
background-color: orange;
animation: small 4s;
animation-fill-mode: forwards;
}
@keyframes small {
0% { width: 200px; height: 200px; background-color: white; }
33% { background-color: green; }
66% { background-color: violet; }
100% { background-color: darkred; }
}
</style>
<script>
function changeFillMode(){
document.getElementById("DIV1").style.animationFillMode = "backwards";
document.getElementById("Sample").innerHTML = "Chế độ điền hoạt ảnh hiện là backwards";
}
</script> </head>
<body>
<div id="DIV1"></div>
<p>Nhấn nút dưới để thay đổi thuộc tính animation-fill-mode</p>
<button onclick="changeFillMode()">THAY ĐỔI FILL</button>
<p id="Sample"></p>
</body> </html>
Kết quả
Khi hoạt ảnh kết thúc, hình vuông có màu đỏ đậm (màu của khung hình cuối cùng):
Sau khi nhấn nút "THAY ĐỔI FILL", màu chuyển về cam (màu của khung hình đầu tiên):
Lưu ý: Thuộc tính này không được hỗ trợ trên IE/Edge và Safari cũ.