Thuộc tính animationFillMode của Style

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

animationFillMode Thuộc tính quy định phong cách sẽ được áp dụng cho phần tử khi animation không phát (khi animation kết thúc, hoặc có "độ trễ").

Mặc định, CSS animation sẽ không ảnh hưởng đến phần tử đang hoạt động animation trước khi phát đầu tiên của khung chìa khóa, và dừng ảnh hưởng sau khi khung chìa khóa cuối cùng hoàn thành.animationFillMode Thuộc tính có thể thay thế hành vi này.

Mô hình

Thay đổi thuộc tính animationFillMode của phần tử <div>:

document.getElementById("myDIV").style.animationFillMode = "forwards";

Thử ngay

Cú pháp

Trả về thuộc tính animationFillMode:

object.style.animationFillMode

Đặt thuộc tính animationFillMode:

object.style.animationFillMode = "none|forwards|backwards|both|initial|inherit"

Giá trị thuộc tính

Giá trị Mô tả
none Giá trị mặc định. Animation sẽ không áp dụng bất kỳ phong cách nào cho mục tiêu trước khi hoặc sau khi thực hiện.
forwards Sau khi animation kết thúc (do animation-iteration-count quyết định), animation sẽ áp dụng giá trị thuộc tính này vào thời điểm animation kết thúc.
backwards

Trong khoảng thời gian được định nghĩa bởi animation-delay, animation sẽ áp dụng giá trị thuộc tính được định nghĩa trong khung chìa khóa, khung chìa khóa này sẽ bắt đầu lặp đầu tiên của animation.

Những giá trị này từ giá trị của khung chìa khóa (khi hướng animation là "normal" hoặc "alternate") hoặc đến giá trị của khung chìa khóa (khi hướng animation là "reverse" hoặc "alternate-reverse").
both Các animation sẽ tuân theo quy tắc trước và sau. Nghĩa là, nó sẽ mở rộng thuộc tính animation ở hai hướng.
initial Đặt thuộc tính này về giá trị mặc định. Xem thêm initial.
inherit Di chuyển thuộc tính này từ phần tử cha của nó. Xem thêm inherit.

Chi tiết kỹ thuật

Giá trị mặc định: none
Giá trị trả về: Chuỗi biểu thị Thuộc tính animation-fill-mode.
Phiên bản CSS: CSS3

Hỗ trợ trình duyệt

animationFillMode Là tính năng CSS3 (1999).

Tất cả các trình duyệt đều hỗ trợ hoàn toàn nó:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ 11

Các trang liên quan

Thư viện tham khảo CSS:Thuộc tính animation-fill-mode