“我要一步一步往前跳，在最远方乘着web往前飞；
小小的天……我有属于我的天”
——题记，改编源自《蜗牛》
正文
当我们给元素做动画的时候，可能会用到steps，把多个图片拼合成一张雪碧图，改变background-position进行动画，简便而又强大的属性。如同变形金刚，“卡卡卡”，而有时又被它搞得一愣一愣的，咦，咋没看到最后一张图。用归用，不由疑惑steps到底是个什么鬼？索性来了解一下。
语法
steps(number, direction)
//number指间隔数，必须为正整数，必选
//directoin接受start和end值，指定在每个间隔的起点或是终点发生阶跃变化，默认end，可选
steps作为timing-function的一个属性，将操作的区域划分为相同等分的间隔，也就是说每步分成n段，注意，这里是步，不是共。比如说0，50%，100%，则会050%分成n步，50%100%分成n步。上2张W3C上对于steps图文并茂的介绍：
w3c关于steps的介绍文字
w3c关于steps的介绍图例
可能我们看了还是不太清楚，直接上例子：
比如说小鸟啄地的3帧动画，用steps实现，改变background-position切换。
原图.png
看代码：
代码
steps(2, start)效果如下，仅在鸟2鸟3中切换（鸟1咋不见了）：
鸟2.png
鸟3.png
而steps(2,end)或者steps(2)，仅在鸟1鸟2中切换（鸟3咋不见了）：
鸟1
鸟2.png
（代码放在了codepen上，可远观可亵玩，看看是不是我说的这个事儿。）
为啥，我们以w3c的线图来解读。
steps(2, start)
因为只有一个100%，steps 的2将该动画分成2步，当选择start时，也就是刚开始的时候0s一跳跳到1，相当于作为一个跃点，完成阶跃，这一切来的那么快，以至于我看不见，所以我们看到的就是鸟2鸟3不断切换。
接下来切换end：
steps(2, end)
当跃点为end时，则动画在终点发生阶跃，也就是说最后一步的最后一点，这一瞬间猝不及防，致使我啥也都看不见。steps的默认状态是end。这也就导致平时我们可能会产生这样的错觉：它不会运行到最后一张，事实上是有，但阶跃的我压根看不到。但是，我们可以利用forwards来查看，发现它最后定的图是鸟3，如果infinite无限循环，鸟3的毛还是看不到的。
解决方法
方法1：在多张图片拼合的成果图（雪碧图）的末尾或开头处再加一张一样大小的空白图，如此便解决了。有时候可能加跟第一张或第一张一样的图，具体问题具体分析~
方法2： 图还是原始图，改变动画keyframes，需要多加一步50%。
@-webkit-keyframes stepsA {
50% { background-position: 0 100%; }
to { background-position: 0 0; }
/*to { background-position: 0 100%; }*/
}
猜想：
step-start， start-end显示的是啥？
step-start = start(1, start)
step-end = start(1, end)
回顾
可以动手试一试~答案，别戳我
参考文章：
https://www.w3.org/TR/2012/WD-css3-transitions-20120403/#transition-timing-function-property
https://developer.mozilla.org/zh-CN/docs/Web/CSS/timing-function
https://idiotwu.me/understanding-css3-timing-function-steps/
网友评论