1.需求背景
隨着前端的發展，我們在做項目的時候除了追求炫酷的特效外，更加追求用戶的體驗和資源的利用率，我們之前在項目裏面做動圖時都是引入Flash動畫，但是Flash動畫通常都是非常大的文件，所以爲了資源優化，我們需要用到animation-timing-function的steps屬性，將動畫變爲GPU渲染出來。
2.animation-timing-function的簡介
animation-timing-function是控制時間的屬性,常見的屬性有
在上圖中，我們可以看到animation-timing-function常見的值可以選擇六種。那麼今天我們來講解不常見的一個值（steps）。
3.steps屬性
animation默認以ease方式過渡,它會在每個關鍵幀之間插入補間動畫,所以動畫效果是連貫性的.除了ease、linear、cubic-bezier之類的過渡函數都會爲其插入補間.但有些效果不需要補間,只需要關鍵幀之間的跳躍,這時應該使用steps過渡方式.
4.steps的測試案例
5.講解
其中div_static的div是一個參考線，沒有任何動畫，div_move的div纔是我們的目標。
步驟一
將上面的代碼複製到你的編輯器裏面。
效果
圖片描述](https://img-blog.csdnimg.cn/20181031114627908.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMjMwNDA1,size_16,color_FFFFFF,t_70)
我們可以看到因爲現在我們使用的是默認值ease，所以看起來幀與幀之間的動畫雖然看起來是不連貫的，但是起碼每一步狀態之間還是會有動畫將其連接起來。
步驟二
將動畫有ease變爲step-end。
效果
我們可以看到，現在的動畫會忽略最後一步，即我們現在動畫從80%到100%的那一步驟。如果我們的動畫步驟只有兩步的話，那麼動畫會一直維持在第一步。
步驟三
將動畫有step-end變爲step-start。
效果
我們可以看到，現在的動畫會忽略第一步，即我們現在動畫直接從20%到100%，不會出現0%的狀態。
步驟四
將動畫有step-start變爲steps（1）。
效果
我們可以看到，現在的動畫和step-end是一樣的，會忽略最後一步，注意，steps可以輸入兩個字，現在我們只是輸入了一個1，第二個值默認是end，所以現在的效果其實是steps（1,end）。
步驟五
將動畫有steps（1）變爲steps（2）。
效果
我們可以看到，現在的動畫還是和step-end一樣的，但是，動畫的頻率變快了。
動畫還是從0%一直到80%，一共花了兩秒鐘走了四步，即每一步用時0.5秒，0%到20%視爲一步。
而現在將數值由1變爲2時， 還是花了兩秒，但是0%到20%被拆分成了兩步，即現在一共花了兩秒鐘走了八步，所以動畫時間縮短，頻率變快了。
步驟六
我們通過步驟五發現，steps屬性是將每一步按照值進行切割，所以我們可以利用他這一個特徵，將原來我們手寫的動畫變成程序自動切割，例如我們現在要從0px移動到500px，則需要變爲
效果
可以發現和step-end效果是一樣的，將0px到500px的距離分爲五步，只不過因爲第二參數默認值是end，所以會忽略最後一步。只會顯示0px到400px，但是代碼量少了很多。
6.擴展
我們可以利用steps屬性將幀動畫變爲連續的動畫，試試將下圖變成動畫吧。
素材
效果
7.總結
如果在@keyframes裏面設置是動畫不是從0%-100%時,那麼動畫幀與動畫幀中間會運用animation-timing-function進行過渡,這樣的動畫非常不順滑.
steps(x,start|end)的第一個參數是指時間函數中的間隔數量(必須是正整數),第二個參數默認值是end,也可以填start,x是指在第一步中又一次分割x次進行動畫,而不是指從第x開始執行,也不是指整個動畫的變化次數.
step-start等同於steps(1,start),會忽略第一步,即從第二步開始執行直到最後,如果只有兩步,那麼會一直存在第二步.
step-end等同於steps(1,end),會忽略最後一步,即從第一步開始執行直到倒數第二步,如果只有兩步,那麼會一直存在第一步.
引用w3c的一張step的工作機制圖 steps
最後再次強調:timing-function 作用於每兩個關鍵幀之間，而不是整個動畫
