跳起来：你不知道的CSS Animation新的Steps()值

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函数值，所以我们仅仅是用于学习实验，不要将它们使用在实际项目中。