Thuộc tính CSS animation-fill-mode
Thí 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;
}
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Thuộc animation-fill-modetính chỉ định kiểu cho phần tử khi hoạt ảnh không phát (trước khi bắt đầu, sau khi 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 animation-fill-modetính có thể ghi đè hành vi này.
| Giá trị mặc định: | không ai |
|---|---|
| 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 = "chuyển tiếp" |
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 -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 |
Các ví dụ khác
Thí 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 (trong khoảng thời gian trễ hoạt ảnh):
div {
animation-fill-mode: backwards;
}
Thí 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;
}
Các trang liên quan
Hướng dẫn CSS: CSS Animations
Tham chiếu DOM HTML: thuộc tính animationFillMode