steps()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Hàm CSS steps() định nghĩa một chuyển đổi chia thời gian đầu vào thành một số khoảng bằng nhau có độ dài đều nhau. Lớp con của hàm bước này đôi khi còn được gọi là hàm bậc thang.
Cú pháp
/* Số khoảng khác nhau */
steps(2, end)
steps(4, jump-end)
steps(12, end)
/* Vị trí nhảy khác nhau */
steps(3, jump-start)
steps(3, jump-end)
steps(3, jump-none)
steps(3, jump-both)
Tham số
Hàm nhận các tham số sau:
<integer>-
Biểu diễn số khoảng bằng nhau hoặc "bước". Phải là số nguyên dương lớn hơn
0trừ khi tham số thứ hai làjump-none, trong trường hợp đó phải là số nguyên dương lớn hơn1. <step-position>-
Chỉ định khi nào xảy ra bước nhảy giữa các giá trị. Nếu bỏ qua, mặc định là
end. Các giá trị từ khóa có thể bao gồm:jump-starthoặcstart-
Chỉ ra rằng bước đầu tiên xảy ra khi hoạt ảnh bắt đầu.
jump-endhoặcend-
Chỉ ra rằng bước cuối cùng xảy ra khi hoạt ảnh kết thúc.
jump-none-
Chỉ ra rằng không có bước nhảy nào xảy ra sớm hay muộn.
jump-both-
Chỉ ra rằng cả bước nhảy sớm và muộn đều xảy ra.
Mô tả
Hàm steps() chia thời lượng hoạt ảnh thành các khoảng bằng nhau.
Ví dụ, steps(4, end) chia hoạt ảnh thành bốn khoảng bằng nhau, với các giá trị thay đổi ở cuối mỗi khoảng ngoại trừ lần thay đổi cuối cùng xảy ra vào cuối hoạt ảnh.
Nếu một hoạt ảnh chứa nhiều đoạn, số bước được chỉ định áp dụng cho mỗi đoạn. Ví dụ, nếu một hoạt ảnh có ba đoạn và dùng steps(2), sẽ có tổng cộng sáu bước, với hai bước mỗi đoạn.
Hình ảnh sau hiển thị tác động của các giá trị <step-position> khác nhau khi các bước nhảy xảy ra:
steps(2, jump-start) /* Hoặc steps(2, start) */
steps(4, jump-end) /* Hoặc steps(4, end) */
steps(5, jump-none)
steps(3, jump-both)
Cú pháp chính thức
<steps()> =
steps( <integer> , <step-position>? )
<integer> =
<number-token>
<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end
Ví dụ
Sử dụng hàm steps()
Các hàm steps() sau đây hợp lệ:
/* Năm bước với nhảy ở cuối */
steps(5, end)
/* Hai bước với nhảy ở đầu */
steps(2, start)
/* Dùng tham số thứ hai mặc định */
steps(2)
Các hàm steps() sau đây không hợp lệ:
/* Tham số đầu tiên phải là <integer>, không phải số thực */
steps(2.0, jump-end)
/* Số bước phải dương */
steps(-3, start)
/* Số bước phải ít nhất là 1 */
steps(0, jump-none)
Thông số kỹ thuật
| Specification |
|---|
| CSS Easing Functions Level 1 # step-easing-functions |
Khả năng tương thích trình duyệt
Xem thêm
- Các hàm làm mượt khác:
cubic-bezier()vàlinear() - Module Hàm làm mượt CSS
- Hàm bước trên Wikipedia