Ngữ pháp CSS @keyframes

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

Bằng cách sử dụng quy tắc @keyframes, bạn có thể tạo ra động.

Nguyên lý tạo ra động là, từ bộ樣式 CSS này dần dần thay đổi thành bộ样式 khác.

Trong quá trình động, bạn có thể thay đổi nhiều lần bộ樣式 CSS này.

Định nghĩa thời gian thay đổi bằng phần trăm hoặc thông qua từ khóa "from" và "to", tương đương với 0% và 100%.

0% là thời gian bắt đầu của động, 100% là thời gian kết thúc của động.

Lưu ý:Để có hỗ trợ trình duyệt tốt nhất, bạn nên luôn luôn định nghĩa bộ lọc 0% và 100%.

Lưu ý:Hãy sử dụng các thuộc tính động để kiểm soát hình ảnh động, đồng thời gắn động với bộ lọc chọn.

Lưu ý:!important Quy tắc bị bỏ qua trong khung thời gian (xin xem ví dụ cuối cùng trên trang này).

Xin xem thêm:

Hướng dẫn CSS3:CSS3 Animation

Mô hình

Ví dụ 1

Chuyển động đều của phần tử div xuống dưới:

@keyframes mymove {
  từ {top: 0px;}
  đến {top: 200px;}
}

thử ngay

ví dụ 2

Thêm nhiều lựa chọn keyframe trong một hiệu ứng động:

@keyframes mymove {
  0%   {top: 0px;}
  25%  {top: 200px;}
  50%  {top: 100px;}
  75%  {top: 200px;}
  100% {top: 0px;}
}

thử ngay

ví dụ 3

Thay đổi nhiều thuộc tính CSS trong một hiệu ứng động:

@keyframes mymove {
  0%   {top: 0px; background: red; width: 100px;}
  100% {top: 200px; background: yellow; width: 300px;}
}

thử ngay

ví dụ 4

Chọn nhiều keyframe với nhiều thuộc tính 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ử ngay

ví dụ 5

Lưu ý:Cú pháp !important bị bỏ qua trong khung thời gian chính:

@keyframes myexample {
  từ {top: 0px;}
  50%  {top: 100px !important;} /* bị bỏ qua */
  đến   {top: 200px;}
}

thử ngay

cú pháp CSS

@keyframes animationname {keyframes-selector {css-styles;}}

giá trị thuộc tính

giá trị mô tả
animationname bắt buộc. Định nghĩa tên của hiệu ứng động.
keyframes-selector

bắt buộc. Phần trăm thời gian của hiệu ứng động.

Giá trị hợp lệ:

  • 0-100%
  • từ (tương đương với 0%)
  • đến (tương đương với 100%)
css-styles bắt buộc. Một hoặc nhiều thuộc tính CSS phong cách hợp lệ.

浏览器支持

Chrome IE / Edge Firefox Safari Opera
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-