Quy tắc CSS @keyframes
Ví dụ
Làm cho một phần tử di chuyển dần xuống 200px:
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
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
Quy tắc @keyframes
chỉ định mã hoạt ảnh.
Hoạt ảnh được tạo bằng cách thay đổi dần dần từ bộ kiểu CSS này sang bộ kiểu CSS khác.
Trong quá trình hoạt ảnh, bạn có thể thay đổi bộ kiểu CSS nhiều lần.
Chỉ định thời điểm thay đổi kiểu sẽ diễn ra theo phần trăm hoặc bằng từ khóa "từ" và "đến", tương tự 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 trình duyệt hỗ trợ 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 hì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 là -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 |
Thêm ví dụ
Ví 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;}
}
Hãy tự mình thử »Ví dụ
Thay đổi nhiều kiểu CSS trong một ảnh động:
@keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
Hãy tự mình thử »Ví 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;}
}
Hãy tự mình thử »Ví 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;}
}
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Hoạt hình CSS