1. Web
  2. CSS
  3. <easing-function>
  4. steps()

steps()

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

steps() CSS 函数定义了一种过渡，它将输入时间划分为指定数量的等长间隔。这种阶梯函数有时也称为楼梯函数。

语法

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)

Graphs of Input progress to Output progress, of which steps(2, jump-start) shows horizontal lines extending 0.5 unit from (0, 0.5) and (0.5, 1), respectively, with empty circles at the origin and (0.5, 0.5); steps(4, jump-end) shows horizontal lines extending 0.25 unit from (0, 0), (0.25, 0.25), (0.5, 0.5), and (0.75, 0.75), respectively, with unfilled circles at (0.25, 0), (0.5, 0.25), and (0.75, 0.5), and a solid circle at (1, 1); steps(5, jump-none) shows horizontal lines extending 0.2 unit from (0, 0), (0.2, 0.25), (0.4, 0.5), (0.6, 0.75), and (0.8, 1), respectively, with unfilled circles at (0.2, 0), (0.4, 0.25), (0.6, 0.5), and (0.8, 0.75); steps(3, jump-both) shows horizontal lines extending 1/3 unit from (0, 0.25), (1/3, 0.5), and (2/3, 0.75),respectively , with a solid circle at (1, 1) and unfilled circles at the origin, (1/3, 0.25), (2/3, 0.5), and (1, 0.75).

正式语法

<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

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

本页面最后由MDN贡献者于修改。

在 GitHub 上查看此页面 • 报告此内容的问题