Cú pháp hoạt ảnh Keyframe - Thủ thuật CSS

Anonim

Khai báo & Sử dụng Cơ bản

@-webkit-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @-moz-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @-o-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) )
#box ( -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */ -moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */ -o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */ animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */ )

Để ngắn gọn, phần còn lại của mã trên trang này sẽ không sử dụng bất kỳ tiền tố nào, nhưng việc sử dụng trong thế giới thực nên sử dụng tất cả các tiền tố của nhà cung cấp từ trên

Nhiều bước

@keyframes fontbulger ( 0% ( font-size: 10px; ) 30% ( font-size: 15px; ) 100% ( font-size: 12px; ) ) #box ( animation: fontbulger 2s infinite; )

Nếu hoạt ảnh có cùng thuộc tính bắt đầu và kết thúc, một cách để làm điều đó là phân tách các giá trị 0% và 100% bằng dấu phẩy:

@keyframes fontbulger ( 0%, 100% ( font-size: 10px; ) 50% ( font-size: 12px; ) )

Hoặc, bạn luôn có thể yêu cầu hoạt ảnh chạy hai lần (hoặc bất kỳ số lần chẵn nào) và cho biết hướng đến alternate.

Gọi hoạt ảnh khung hình chính với các thuộc tính riêng biệt

.box ( animation-name: bounce; animation-duration: 4s; /* or: Xms */ animation-iteration-count: 10; animation-direction: alternate; /* or: normal */ animation-timing-function: ease-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */ animation-fill-mode: forwards; /* or: backwards, both, none */ animation-delay: 2s; /* or: Xms */ )

Tốc ký hoạt hình

Chỉ cần phân tách bằng dấu cách tất cả các giá trị riêng lẻ. Thứ tự không quan trọng ngoại trừ khi sử dụng cả thời lượng và độ trễ, chúng cần phải theo thứ tự đó. Trong ví dụ bên dưới 1s = thời lượng, 2s = độ trễ, 3 = lần lặp.

animation: test 1s 2s 3 alternate backwards

Kết hợp chuyển đổi và hoạt ảnh

@keyframes infinite-spinning ( from ( transform: rotate(0deg); ) to ( transform: rotate(360deg); ) )

Nhiều hoạt ảnh

Bạn có thể phân tách các giá trị bằng dấu phẩy để khai báo nhiều hoạt ảnh trên một bộ chọn.

.animate-this ( animation: first-animation 2s infinite, another-animation 1s; )

Các bước ()

Hàm step () kiểm soát chính xác số lượng khung hình chính sẽ hiển thị trong khung thời gian hoạt ảnh. Giả sử bạn tuyên bố:

@keyframes move ( from ( top: 0; left: 0; ) to ( top: 100px; left: 100px; ) )

Nếu bạn sử dụng các bước (10) trong hoạt ảnh của mình, nó sẽ đảm bảo chỉ có 10 khung hình chính xảy ra trong thời gian quy định.

.move ( animation: move 10s steps(10) infinite alternate; )

Toán học hoạt động tốt ở đó. Cứ sau một giây, phần tử sẽ di chuyển 10px sang trái và 10px xuống dưới, cho đến khi kết thúc hoạt ảnh và sau đó ngược lại mãi mãi.

Điều này có thể tuyệt vời cho hoạt ảnh spritesheet như bản demo này của simurai.

Hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Trình duyệt Chrome Firefox I E Cạnh Safari
4* 5 * 10 12 5.1 *

Di động / Máy tính bảng

Chrome dành cho Android Android Firefox Android iOS Safari
88 85 4* 6,0-6,1 *

Nhiêu tai nguyên hơn

  • Tài liệu MDN
  • MDN: Sử dụng CSS Animation
  • Tôi có thể sử dụng - Hỗ trợ trình duyệt
  • VIDEO: Giới thiệu về Hoạt ảnh CSS