Quy tắc CSS @keyframes
Thí dụ
Làm cho một phần tử di chuyển dần dần xuống 200px:
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
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
Quy @keyframestắc chỉ định mã hoạt ảnh.
Hoạt ảnh được tạo ra bằng cách thay đổi dần dần từ một tập hợp các kiểu CSS này sang một tập hợp các kiểu CSS khác.
Trong quá trình hoạt ảnh, bạn có thể thay đổi tập hợp các kiểu CSS nhiều lần.
Chỉ định thời điểm thay đổi kiểu sẽ xảy ra theo phần trăm hoặc với các từ khóa "from" và "to", giống như 0% và 100%. 0% là lúc bắt đầu hoạt ảnh, 100% là khi hoạt ảnh hoàn tất.
Mẹo: Để được hỗ trợ trình duyệt tốt nhất, bạn phải luôn xác định cả bộ chọn 0% và 100%.
Lưu ý: Sử dụng các thuộc tính hoạt ảnh để kiểm soát sự xuất hiện của hoạt ảnh và cũng để liên kết hoạt ảnh với các bộ chọn.
Lưu ý: Quy tắc! Important bị bỏ qua trong khung hình chính (Xem ví dụ cuối cùng trên trang này).
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 đủ quy tắc.
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 | |||||
|---|---|---|---|---|---|
| @keyframes | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
Cú pháp CSS
@keyframes animationname {keyframes-selector {css-styles;}}
Giá trị tài sản
| Value | Description |
|---|---|
| animationname | Required. Defines the name of the animation. |
| keyframes-selector | Required. Percentage of the animation duration. Legal values: 0-100% Note: You can have many keyframes-selectors in one animation. |
| css-styles | Required. One or more legal CSS style properties |
Các ví dụ khác
Thí dụ
Thêm nhiều bộ chọn khung hình chính trong một hoạt ảnh:
@keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
Thí dụ
Thay đổi nhiều kiểu CSS trong một hoạt ảnh:
@keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
Thí dụ
Nhiều bộ chọn khung hình chính với nhiều kiểu CSS:
@keyframes mymove
{
0% {top: 0px; left: 0px; background: red;}
25% {top: 0px; left: 100px; background: blue;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}
Thí dụ
Lưu ý: Quy tắc! Important bị bỏ qua trong khung hình chính:
@keyframes myexample
{
from {top: 0px;}
50% {top: 100px !important;} /* ignored
*/
to {top: 200px;}
}
Các trang liên quan
Hướng dẫn CSS: CSS Animations