CSS动画中有一个animation-timing-function属性，它的值除了ease,linear,cubic-bezier，还有一个steps()步进函数，本文我们将讨论steps()函数的四个新值。到目前为止，这些新值仅在Firefox65+中可用，这意味着该演示只能在Firefox中实现，直到其他浏览器实现为止。steps()函数中的四个新值分别是：jump-startjump-endjump-bothjump-none这些新值和现有值有什么区别呢？它们什么时候适合使用？下面的内容将详细介绍。Easings和steps()函数首先，让我们退后一步，看看animation-timing-function属性中的easings值和steps()函数的传统值。Easings可以改变WebAnimationsAPI中的过渡或动画或动画的节奏，这是连续的。.mover{动画：移动2000毫秒；动画计时函数：线性；/*缓动*/transform:translateX(0px);}@keyframesmove{100%{transform:translateX(200px);}}通过线性缓动，元素将以均匀的速度移动。如果我们改成ease-in，元素的运动节奏会在一开始变慢，在动画快要结束的时候加速得更快。steps不同，我们可以把动画分成特定数量的动画帧，所以如果把easing改成steps(2)，那么动画就只有两个动画帧，开始帧和结束帧。steps()函数的第二个（可选）参数指定在每个间隔的开始或结束时发生步长变化。之前支持start和end两个值，现在新增了四个值。Start和End的四个新值中，有两个其实是对原来start和end的替换值：jump-start===startjump-end===end跳转前缀帮助我们解释start和end这两个词更有效。当我们使用start或jump-start时，我们告诉动画跳过起始位置。同样，当使用end或jump-end时，我们希望跳过结束位置。你可以将steps(n)理解为动画元素在指定时间间隔内以线性平均速度移动的快照。动画过程就是将快照一张一张展示的过程。当我们指定一个动画为steps(4,jump-start)时，表示将一个流畅的动画过程平均分为四个部分，然后对每个部分的开始状态进行快照抓取，并显示这些快照。同理，steps(5,jump-end)表示将一个流畅的动画平均分为五个部分，对每个部分的结束状态进行快照抓取，最后将这些快照显示出来。旋转当我们想到时钟上的秒针时，我们可以更清楚地理解起始值和结束值的作用——秒针需要运行60秒才能转一圈（从0度到360度)，即步数(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%。移动元素的一个简单示例是将屏幕上的元素从A点逐步移动到B点。以前我们只能跳过开始状态或结束状态，并且没有一种简单的方法可以同时为两个状态设置动画。现在我们有了jump-none：使用steps()方法的先前值，我们仍然可以实现这一点，但需要做一些额外的数学计算。现在更容易了，因为您知道动画的开始状态和结束状态都会显示。不透明度Opacity属性的动画也可以受益于新值jump-none。如果我们需要实现一个不透明度Opacity从0到1反复变化的动画（即闪烁效果），使用start或end值设置Neverseefullyopaque或fullytransparentstates。但是jump-none不会有这个问题。设置为steps(2,jump-none)的动画会实现类似on/offk的效果：jump-both我们可以跳过step动画的初始状态，结束状态可以跳过，两个状态都不能跳转，然后jump-both被left，这意味着开始和结束状态都被跳过。我还没有想到这个值的合适用途，如果你想到了，请在下面的评论中告诉我。支持Webkit和EdgeHTML核心浏览器的浏览器目前还不支持新增加的steps函数值，所以我们只是为了学习实验使用，并没有在实际项目中使用。
