跳起来：你不知道的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函数值，因此咱们仅仅是用于学习实验，不要将它们使用在实际项目中。