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才是我們的目標。
步驟一
將上面的程式碼複製到你的編輯器裡面。
效果

我們可以看到因為現在我們使用的是預設值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 作用於每兩個關鍵幀之間，而不是整個動畫