CSS 动画中有一个 animation-timing-function 属性，它的取值除了 ease，linear，cubic-bezier 之外，还有一个 steps() 阶跃函数，这篇文章我们来讨论 steps() 函数新增的四种取值。到目前为止，这新增的几个取值仅在 Firefox 65+ 中可用，也就是说在其他浏览器实现之前，演示只能在 Firefox 中实现。

steps() 函数中新增的四个值是：

• jump-start
• jump-end
• jump-both
• jump-none

这些新增的值与已有的值有什么区别？它们适合在什么时候使用？下面的内容将详细介绍。

Easings 和 steps() 函数

首先，我们后退一步，看一看 animation-timing-function 属性中 easings 取值和 steps() 函数的传统取值。

Easings 可以改变一个 transition 或者 animation 或者 Web Animations API 中动画的节奏，这个节奏是连续性的。

.mover {
  animation: move 2000ms;
  animation-timing-function: linear; /* easing */
  transform: translateX(0px);
}

@keyframes move {
  100% {transform: translateX(200px);
  }
}

通过一个 linear easing，元素会以均匀的速度移动。如果我们改变为 ease-in，元素的移动节奏就会变为刚开始慢，到动画快结束时加速变快。

Steps 则不同，我们可以将动画划分为特定数量的动画帧，所以，如果改变 easing 为 steps(2)，那么动画将只有两个动画帧，开始帧和结束帧。

steps() 函数的第二个（可选）参数指定在每个间隔的起点或是终点发生阶跃变化。之前支持 start 和 end 两个值，现在又增加了四个新值。

Start 和 End

在新增的四个值中，其中有两个其实是原来 start 和 end 的代替值：

• jump-start === start
• jump-end === end

jump 前缀帮助我们更有效地解释单词 start 和 end。当我们使用 start 或 jump-start 时，我们告诉动画跳过起始位置。同样的，使用 end 或 jump-end 时，我们希望跳过结束位置。

你可以将 steps(n) 理解为一个 linear 均速移动的动画元素按照指定的时间间隔进行快照截取，动画的过程就是一个快照接着一个快照显示的过程。当我们指定一个动画为 steps(4, jump-start) 时，意味着将一个平滑的动画过程平均划分为四部分，然后取每个部分的开始状态进行快照截取，并将这些快照显示出来。同样的，steps(5, jump-end) 意味将一个平滑动画平均划分为五个部分，取每个部分的结束状态进行快照截取，最后将这些快照显示出来。

旋转

当我们想到时钟上的秒针时，就可以更清楚的认识到 start 和 end 两个值的作用 – 秒针需要运行 60 秒旋转一圈（从 0 度到 360 度），也就是 steps(60)。无论使用 jump-start/start 还是 jump-end/end 都可以实现一圈又一圈的连续旋转，但是，如果 jump-start/start 和 jump-end/end 都显示每个动画帧的起始状态和结束状态，那么秒针就会在最顶部 0 度的位置停留两次，这明显是不符合常规的。

雪碧图

steps() 另一个重要的应用是雪碧图动画。通过从 translateX(0) 到 translate(-100%) 位移的改变，将一组动画帧组成一个连续的动画。

jump-none

与 jump-start，jump-end 只是命名方式的改变不同，这是一个新增的 steps 取值。

有时候我们并不需要跳过动画的任何一个状态。新的取值 jump-none 就支持同时保留动画的起始状态和结束状态。对于一个包含至少 2 帧的动画来说，起始状态和结束状态都将会显示出来。其余的动画帧将均匀的分部在两个状态的中间。例如 steps(3, jump-none) 会将整个动画平均分配为三个动画帧，即 0%，50% 和 100%。

移动一个元素

一个简单的例子就是在屏幕上移动一个元素，让它以 steps 阶跃的方式从 A 点移动到 B 点。以前我们只能跳过开始状态或者结束状态，并没有一种简单的方法让动画同时显示两种状态。而现在我们有了 jump-none：

使用 steps() 方法之前的取值，仍然能够实现这一点，但是需要做一些额外的数学计算。现在则变得简单了，因为你知道动画的起始状态和结束状态都会被显示。

Opacity

不透明度 Opacity 属性的动画同样可以从新的取值 jump-none 中受益，假如我们需要实现一个不透明度 Opacity 从 0 到 1 阶跃重复变化的动画（即闪烁效果），使用 start 或 end 值，将永远看不到完全不透明或完全透明的状态。但是 jump-none 则不会出现这种问题，一个被设置为 steps(2, jump-none) 的动画会实现类似 on/offk 的效果：

jump-both

我们可以跳过阶跃动画的起始状态，可以跳过结束状态，可以两个状态都不跳，那么就剩下 jump-both 了，它表示起始和结束的两个状态都跳过。

我还没有想到适合这个取值的用途，如果你想到了可以在下面评论告诉我。

浏览器支持

Webkit 和 EdgeHTML 内核的浏览器到目前为止还不支持新增的 steps 函数值，所以我们仅仅是用于学习实验，不要将它们使用在实际项目中。