Hàm CSS steps()

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

CSS của steps() Hàm này được sử dụng để tạo các hàm thời gian bước cho hoạt ảnh.

Hàm này chia thời gian hoạt ảnh thành các đoạn bằng nhau theo số lượng chỉ định (n). Ví dụ: nếu n là 4, hoạt ảnh sẽ được chia thành 4 phần. Nó sẽ chia thời gian từ 0% đến 100% thành 4 phần; tương ứng là 0%-25%, 25%-50%, 50%-75% và 75%-100%

Mô hình

Tạo các hàm thời gian bước khác nhau cho hoạt ảnh:

div.a {
  animation: mymove 5s steps(4, end);
}
div.b {
  animation: mymove 5s steps(6, jump-start);
}
div.c {
  animation: mymove 5s steps(4, jump-none);
}
div.d {
  animation: mymove 5s steps(4, jump-both);
}

Thử ngay

Ngữ pháp CSS

steps(n, step-position)
Giá trị Mô tả
n Bắt buộc. Định nghĩa bước/间隔.
step-position

Tùy chọn. Định nghĩa thời gian xảy ra nhảy giữa các giá trị. Sử dụng một trong các từ khóa sau:

  • jump-start hoặc start: bước đầu tiên xảy ra khi hoạt ảnh bắt đầu
  • jump-end hoặc end: bước cuối cùng xảy ra khi hoạt ảnh kết thúc. End là giá trị mặc định
  • jump-none: không xảy ra nhảy trước hoặc sau
  • jump-both: nhảy trước và sau cùng một lúc

Chi tiết kỹ thuật

Phiên bản: CSS Easing Functions Level 1

Hỗ trợ trình duyệt

Số liệu trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ hàm đó.

Chrome Edge Firefox Safari Opera
77 79 65 14 64

Trang liên quan

Tham khảo:Thuộc tính animation CSS

Tham khảo:Thuộc tính animation-timing-function CSS