steps()
語法
css
/* Different intervals */
steps(2, end)
steps(4, jump-end)
steps(12, end)
/* Different jump positions */
steps(3, jump-start)
steps(3, jump-end)
steps(3, jump-none)
steps(3, jump-both)
引數
該函式接受以下引數：
<integer>-
表示等距間隔或“步數”。它必須是大於
0的正整數，除非第二個引數是jump-none，在這種情況下，它必須是大於1的正整數。 <step-position>-
指定值之間何時發生跳躍。如果省略，則預設為
end。可能的關鍵字值包括：jump-start或start-
表示動畫開始時發生第一個步進。
jump-end或end-
表示動畫結束時發生最後一個步進。
jump-none-
表示不會發生提前或延遲的跳躍。
jump-both-
表示提前和延遲的跳躍都會發生。
描述
steps()函式將動畫持續時間分成相等的間隔。例如，steps(4, end)將動畫分成四個相等的間隔，值在每個間隔的末尾改變，除了在動畫結束時發生的最後一次改變。
如果動畫包含多個片段，則指定的步數適用於每個片段。例如，如果動畫有三個片段並使用steps(2)，則總共有六個步進，每個片段兩個步進。
下圖顯示了當跳躍發生時不同<step-position>值的影響：
css
steps(2, jump-start) /* Or steps(2, start) */
steps(4, jump-end) /* Or steps(4, end) */
steps(5, jump-none)
steps(3, jump-both)
正式語法
<steps()> =
steps( <integer> , <step-position>? )
<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end
示例
使用 steps() 函式
以下steps()函式是有效的：
css
/* Five steps with jump at the end */
steps(5, end)
/* Two steps with jump at the start */
steps(2, start)
/* Using default second parameter */
steps(2)
以下steps()函式是無效的：
css
/* First parameter must be an <integer>, not a real value */
steps(2.0, jump-end)
/* Number of steps must be positive */
steps(-3, start)
/* Number of steps must be at least 1 */
steps(0, jump-none)
規範
| 規範 |
|---|
| CSS 緩動函式級別 1 # step-easing-functions |
瀏覽器相容性
載入中…
另見
- 其他緩動函式：
cubic-bezier()和linear() - CSS 緩動函式模組
- 維基百科上的階梯函式