摘要：通过从到位移的改变，将一组动画帧组成一个连续的动画。其余的动画帧将均匀的分部在两个状态的中间。例如会将整个动画平均分配为三个动画帧，即，和。
CSS动画中有一个animation-timing-function属性，它的取值除了ease，linear，cubic-bezier之外，还有一个steps()阶跃函数，这篇文章我们来讨论steps()函数新增的四种取值。到目前为止，这新增的几个取值仅在Firefox 65+中可用，也就是说在其他浏览器实现之前，演示只能在Firefox中实现。
steps()函数中新增的四个值是：
jump-start
jump-end
jump-both
jump-none
这些新增的值与已有的值有什么区别？它们适合在什么时候使用？下面的内容将详细介绍。
首先，我们后退一步，看一看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-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了，它表示起始和结束的两个状态都跳过。
我还没有想到适合这个取值的用途，如果你想到了可以在下面评论告诉我。
浏览器支持Webkit和EdgeHTML内核的浏览器到目前为止还不支持新增的steps函数值，所以我们仅仅是用于学习实验，不要将它们使用在实际项目中。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/53956.html
摘要：通过从到位移的改变，将一组动画帧组成一个连续的动画。其余的动画帧将均匀的分部在两个状态的中间。例如会将整个动画平均分配为三个动画帧，即，和。 CSS动画中有一个animation-timing-function属性，它的取值除了ease，linear，cubic-bezier之外，还有一个steps()阶跃函数，这篇文章我们来讨论steps()函数新增的四种取值。到目前为止，这新增的几...
摘要：通过从到位移的改变，将一组动画帧组成一个连续的动画。其余的动画帧将均匀的分部在两个状态的中间。例如会将整个动画平均分配为三个动画帧，即，和。 CSS动画中有一个animation-timing-function属性，它的取值除了ease，linear，cubic-bezier之外，还有一个steps()阶跃函数，这篇文章我们来讨论steps()函数新增的四种取值。到目前为止，这新增的几...
摘要：简单就意味着更快的开发速度，更小的维护成本，同时往往具有更好的体验下面我介绍哪些或许你不知道小技巧。默认为，此时阴影与元素同样大。如果没有指定，则由浏览器决定通常是的值，不过目前取透明。首先，我们要明白这里的最小宽度值是什么意思。 暑假实习的时候带我的师傅，告诉我要注重基础，底层实现原理。才能在日新月异的技术行业站住脚跟，以不变应万变，万丈高楼平地起，所以我们应该不断的去学习，去交流。...
摘要：简单就意味着更快的开发速度，更小的维护成本，同时往往具有更好的体验下面我介绍哪些或许你不知道小技巧。默认为，此时阴影与元素同样大。如果没有指定，则由浏览器决定通常是的值，不过目前取透明。首先，我们要明白这里的最小宽度值是什么意思。 暑假实习的时候带我的师傅，告诉我要注重基础，底层实现原理。才能在日新月异的技术行业站住脚跟，以不变应万变，万丈高楼平地起，所以我们应该不断的去学习，去交流。...
摘要：简单就意味着更快的开发速度，更小的维护成本，同时往往具有更好的体验下面我介绍哪些或许你不知道小技巧。默认为，此时阴影与元素同样大。如果没有指定，则由浏览器决定通常是的值，不过目前取透明。首先，我们要明白这里的最小宽度值是什么意思。 暑假实习的时候带我的师傅，告诉我要注重基础，底层实现原理。才能在日新月异的技术行业站住脚跟，以不变应万变，万丈高楼平地起，所以我们应该不断的去学习，去交流。...
阅读 1954·2021-11-24 09:39
阅读 954·2021-11-11 16:55
阅读 1387·2021-10-09 09:43
阅读 1387·2021-10-08 10:17
阅读 1587·2021-08-25 09:41
阅读 390·2019-08-30 13:02
阅读 602·2019-08-29 15:14
阅读 959·2019-08-29 13:53
