Thuộc tính animation-fill-mode CSS

Định nghĩa và cách sử dụng

animation-fill-mode Thuộc tính này quy định animation có nên hiển thị hiệu ứng animation trước hoặc sau khi phát hoặc không.

Chú ý:Giá trị của thuộc tính là một hoặc nhiều từ khóa chế độ lấp đầy phân cách bằng dấu phẩy.

Xin xem thêm:

Hướng dẫn CSS3:CSS Animation

Hướng dẫn tham khảo HTML DOM:Thuộc tính animationFillMode

Mô hình

Định nghĩa chế độ lấp đầy cho phần tử h1:

h1
  {
  animation-fill-mode: forwards;
  }

Cú pháp CSS

animation-fill-mode : none | forwards | backwards | both;
Giá trị Mô tả
none Không thay đổi hành vi mặc định.
forwards Khi animation hoàn thành, giữ giá trị thuộc tính cuối cùng (được định nghĩa trong keyframe cuối cùng).
backwards Trong thời gian được chỉ định bởi animation-delay, trước khi animation hiển thị, áp dụng giá trị thuộc tính bắt đầu (được định nghĩa trong keyframe đầu tiên).
both Cả hai chế độ lấp đầy trước và sau đều được áp dụng.

Chi tiết kỹ thuật

Giá trị mặc định: none
Thừa kế: no
Phiên bản: CSS3
Cú pháp JavaScript: object.style.animationFillMode=none

Hỗ trợ trình duyệt

Số liệu trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

Số liệu với tiền tố -webkit-、-moz- hoặc -o- biểu thị phiên bản đầu tiên sử dụng tiền tố.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.1
12.0 -o-