Thuộc tính chế độ điền hoạt ảnh CSS
Ví dụ
Để phần tử <div> giữ lại các giá trị kiểu từ khung hình chính cuối cùng khi hoạt ảnh kết thúc:
div {
animation-fill-mode: forwards;
}
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc tính animation-fill-mode
chỉ định kiểu cho phần tử khi hoạt ảnh không phát (trước khi hoạt ảnh bắt đầu, sau khi hoạt ảnh kết thúc hoặc cả hai).
Hoạt ảnh CSS không ảnh hưởng đến phần tử trước khi khung hình chính đầu tiên được phát hoặc sau khi khung hình chính cuối cùng được phát. Thuộc tính animation-fill-mode
có thể ghi đè hành vi này.
Giá trị mặc định: | không có |
---|---|
Thừa hưởng: | KHÔNG |
Hoạt hình: | KHÔNG. Đọc về hoạt hình |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | đối tượng .style.animationFillMode="forwards"Hãy dùng thử |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Các số theo sau là -webkit-, -moz- hoặc -o- chỉ định phiên bản đầu tiên hoạt động với tiền tố.
Property | |||||
---|---|---|---|---|---|
animation-fill-mode | 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- |
Cú pháp CSS
animation-fill-mode: none|forwards|backwards|both|initial|inherit;
Giá trị tài sản
Value | Description |
---|---|
none | Default value. Animation will not apply any styles to the element before or after it is executing |
forwards | The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count) |
backwards | The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period |
both | The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Ví dụ
Để phần tử <div> nhận các giá trị kiểu do khung hình chính đầu tiên đặt trước khi hoạt ảnh bắt đầu (trong khoảng thời gian trễ hoạt ảnh):
div {
animation-fill-mode: backwards;
}
Hãy tự mình thử »Ví dụ
Để phần tử <div> nhận các giá trị kiểu được đặt bởi khung hình chính đầu tiên trước khi hoạt ảnh bắt đầu và giữ lại các giá trị kiểu từ khung hình chính cuối cùng khi hoạt ảnh kết thúc:
div {
animation-fill-mode: both;
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Hoạt hình CSS
Tham chiếu DOM HTML: thuộc tính animationFillMode