“我要一步一步往前跳，在最遠(yuǎn)方乘著web往前飛；
小小的天……我有屬于我的天”
——題記，改編源自《蝸牛》

正文

當(dāng)我們給元素做動(dòng)畫的時(shí)候，可能會(huì)用到steps，把多個(gè)圖片拼合成一張雪碧圖，改變background-position進(jìn)行動(dòng)畫，簡(jiǎn)便而又強(qiáng)大的屬性。如同變形金剛，“卡卡卡”，而有時(shí)又被它搞得一愣一愣的，咦，咋沒(méi)看到最后一張圖。用歸用，不由疑惑steps到底是個(gè)什么鬼？索性來(lái)了解一下。

語(yǔ)法

steps(number, direction)
//number指間隔數(shù)，必須為正整數(shù)，必選
//directoin接受start和end值，指定在每個(gè)間隔的起點(diǎn)或是終點(diǎn)發(fā)生階躍變化，默認(rèn)end，可選

steps作為timing-function的一個(gè)屬性，將操作的區(qū)域劃分為相同等分的間隔，也就是說(shuō)每步分成n段，注意，這里是步，不是共。比如說(shuō)0，50%，100%，則會(huì)0_{50%分成n步，50%}100%分成n步。上2張W3C上對(duì)于steps圖文并茂的介紹：

w3c關(guān)于steps的介紹文字

w3c關(guān)于steps的介紹圖例

可能我們看了還是不太清楚，直接上例子：
比如說(shuō)小鳥啄地的3幀動(dòng)畫，用steps實(shí)現(xiàn)，改變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上，可遠(yuǎn)觀可褻玩，看看是不是我說(shuō)的這個(gè)事兒。）

為啥，我們以w3c的線圖來(lái)解讀。

steps(2, start)

因?yàn)橹挥幸粋€(gè)100%，steps 的2將該動(dòng)畫分成2步，當(dāng)選擇start時(shí)，也就是剛開始的時(shí)候0s一跳跳到1，相當(dāng)于作為一個(gè)躍點(diǎn)，完成階躍，這一切來(lái)的那么快，以至于我看不見，所以我們看到的就是鳥2鳥3不斷切換。

接下來(lái)切換end：

steps(2, end)

當(dāng)躍點(diǎn)為end時(shí)，則動(dòng)畫在終點(diǎn)發(fā)生階躍，也就是說(shuō)最后一步的最后一點(diǎn)，這一瞬間猝不及防，致使我啥也都看不見。steps的默認(rèn)狀態(tài)是end。這也就導(dǎo)致平時(shí)我們可能會(huì)產(chǎn)生這樣的錯(cuò)覺(jué)：它不會(huì)運(yùn)行到最后一張，事實(shí)上是有，但階躍的我壓根看不到。但是，我們可以利用forwards來(lái)查看，發(fā)現(xiàn)它最后定的圖是鳥3，如果infinite無(wú)限循環(huán)，鳥3的毛還是看不到的。

解決方法
方法1：在多張圖片拼合的成果圖（雪碧圖）的末尾或開頭處再加一張一樣大小的空白圖，如此便解決了。有時(shí)候可能加跟第一張或第一張一樣的圖，具體問(wèn)題具體分析~
方法2： 圖還是原始圖，改變動(dòng)畫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)

回顧

可以動(dòng)手試一試~答案，別戳我

參考文章：
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/