I. Định nghĩa và cách sử dụng
Thuộc tính
animation-fill-mode gán cho chuyển động trong lúc nó không thực hiện chuyển động (chuyển động đã hoàn thành hoặc chuyển động đang chuẩn bị bắt đầu)
Theo lý thuyết, các chuyển động của CSS không ảnh hưởng đến các selector cho đến lúc
keyframes đầu tiên bắt đầu "hoạt động", và sau đó dừng lại cho đén khi
keyframes cuối cùng đã hoàn thành. Thuộc tính
animation-fill-mode có thể ghi đè lên hoạt động đó.
Giá trị mặc định:
none
II. Các trình duyệt hỗ trợ
Thuộc tính
| 
| 
| 
| 
| 
|
animation-fill-mode
| 4.0 -webkit-
| 10.0
| 16.0
5.0 -moz-
| 4.0 -webkit-
| 15.0 -webkit-
12.1
12.0 -o- |
III. Cú pháp CSS
animation-fill-mode: <none|forwards|backwards|both|initial|inherit>;
IV. Ý nghĩa các giá trị thuộc tính
Giá trị
| Mô tả
|
none
| Giá trị mặc định. Chuyển động sẽ không được áp dụng cho bất kỳ style nào với các yếu tố của selector trước hoặc sau khi nó được thực hiện.
|
forwards
| Sau khi chuyển động kết thúc (được xác định bởi thuộc tính animation-iteration-count), chuyển động sẽ giữ nguyên vị trí lúc mà chuyển động đã kết thúc.
|
backwards
| Chuyển động sẽ áp dụng các giá trị thuộc tính đã quy định tại keyframes đó khi bắt đầu chu kỳ đầu tiên của chuyển động trong khoảng thời gian được xác định bởi thuộc tính animation-delay. Đây là một trong hai giá trị từ keyframes (khi thuộc tính animation-direction là "normal" hoặc "alternate") hoặc để keyframes (khi thuộc tính animation-direction là "reverse" hoặc "alternate-reverse")
|
both
| Chuyển động sẽ thực hiện theo quy tắc cả phía trước và phía sau. Nghĩa là nó sẽ mở rộng các thuộc tính chuyển động trong cả hai hướng.
|
initial
| Thiết lập lại thuộc tính mặc định của nó
|
inherit
| Thừa hưởng lại giá trị từ selector bọc bên ngoài.
|
|
V. Ví dụ minh họa
Đánh dấu