Thuộc tính animationFillMode được sử dụng để chỉ định cách các kiểu được áp dụng bên ngoài thời gian thực thi, tức là sau khi nó kết thúc hoặc nếu một độ trễ đã được chỉ định. Điều này hữu ích trong việc đặt kiểu hoạt ảnh css cho một phần tử trước khi hoạt ảnh bắt đầu và sau khi hoạt ảnh kết thúc.
Cú pháp
Sau đây là cú pháp cho -
Đặt thuộc tính animationFillMode -
object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"
Giá trị
Sau đây là các giá trị -
| Giá trị | Mô tả |
|---|---|
| không | Điều này làm cho hoạt ảnh sẽ không áp dụng bất kỳ kiểu nào cho phần tử đích trước khi bắt đầu hoặc sau khi hoạt ảnh kết thúc. Đây là giá trị mặc định. |
| chuyển tiếp | Nó áp dụng kiểu key-frame cuối cùng cho phần tử đích sau khi kết thúc hoạt ảnh. |
| ngược | Nó áp dụng kiểu key-frame đầu tiên cho phần tử đích sau khi kết thúc hoạt ảnh. |
| cả hai | Nó áp dụng cả quy tắc tiến và lùi cho hoạt ảnh |
| Ban đầu | Để đặt thuộc tính này thành giá trị ban đầu |
| nherit | Kế thừa thuộc tính này từ phần tử mẹ của nó. |
Ví dụ
Chúng ta hãy xem ví dụ về 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="The animation fillmode is now backwards";
}
</script>
</head>
<body>
<div id="DIV1"></div>
<p>Click the below button to change the above animation fillmode property</p>
<button onclick="changeFillMode()">CHANGE FILL</button>
<p id="Sample"></p>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi hoạt ảnh kết thúc, màu hình vuông có màu đỏ sẫm vì nó là khung hình chính cuối cùng -
Khi nhấp vào CHANGE FILL, màu sắc sẽ thay đổi thành màu cam, đây là khung hình chính đầu tiên của chúng tôi -
Lưu ý - Thuộc tính này không được hỗ trợ trong trình duyệt IE / EDGE và Safari.