“我要一步一步往前跳融撞，在最遠(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ì)050%分成n步，50%100%分成n步兼雄。上2張W3C上對(duì)于steps圖文并茂的介紹：
可能我們看了還是不太清楚吟逝，直接上例子：
比如說(shuō)小鳥啄地的3幀動(dòng)畫，用steps實(shí)現(xiàn)赦肋，改變background-position切換块攒。
看代碼：
steps(2, start)效果如下，僅在鳥2鳥3中切換（鳥1咋不見(jiàn)了）：
而steps(2,end)或者steps(2)佃乘，僅在鳥1鳥2中切換（鳥3咋不見(jiàn)了）：
（代碼放在了codepen上囱井，可遠(yuǎn)觀可褻玩，看看是不是我說(shuō)的這個(gè)事兒趣避。）
為啥庞呕，我們以w3c的線圖來(lái)解讀。
因?yàn)橹挥幸粋€(gè)100%程帕，steps 的2將該動(dòng)畫分成2步住练，當(dāng)選擇start時(shí)，也就是剛開始的時(shí)候0s一跳跳到1愁拭，相當(dāng)于作為一個(gè)躍點(diǎn)澎羞，完成階躍，這一切來(lái)的那么快敛苇，以至于我看不見(jiàn)妆绞，所以我們看到的就是鳥2鳥3不斷切換顺呕。
接下來(lái)切換end：
當(dāng)躍點(diǎn)為end時(shí)，則動(dòng)畫在終點(diǎn)發(fā)生階躍括饶，也就是說(shuō)最后一步的最后一點(diǎn)株茶，這一瞬間猝不及防，致使我啥也都看不見(jià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/
