animation預設以ease方式過渡，會以在每個關鍵幀之間插入補間動畫，所以動畫效果是連貫性的。ease，linear等之類的過渡函式都會為其插入補間。但有些效果不需要補間，只需要關鍵幀之間的跳躍，這時應該使用steps過渡方式。本文後面有案例。
steps用法
簡單地說，就是原本一個狀態向另一個狀態的過渡是平滑的，steps可以實現分佈過渡。steps用法 :
|
1 |
steps(n,[start | end]) |
n是一個自然數，steps函式把動畫分成n等份。
step-start等同於steps(1,start)，動畫分成 1 步，動畫執行時以左側端點為開始step-end等同於 steps(1,end) ，動畫分成 1 步，動畫執行時以結尾端點為開始
沒懂對不對？我也沒懂，上面是官方的說法。接著往下看吧
辨析steps
可以在demo中檢視step的區別：狠狠地戳下去
steps(4,start) 與 steps(1,start) 的最大區別就是每次動畫”跳躍”的時候，即從 0% -> 25% 的時候，steps(1) 直接一步到位，瞬間從0%的狀態跳到25%的狀態，而steps(4)會逐漸走4步，即從 0% -> 25% 要跳 4 步 !
慢慢體會一下，應該就知道steps的作用了吧
案例 – 控制檯效果
先戳 demo
這裡就是steps(1,start) ，動畫又是隻有 0%(100%) 、 50% 兩個狀態，所以直接一步跳躍，直接走完。
你可以改成
steps(4)，就更能知道steps的作用了
案例 – 人人網首頁效果
先看看人人網首頁的效果:
再戳demo
一步一步分析：
- 首先，我們不加動畫，就像
s1； - 然後，加
animation但是沒有steps，像s2那樣。這樣很奇怪是不是，就是因為沒有steps，動畫是連貫的，所以我們看到了跑馬燈似的效果：
- 最後，當然是我們的終極效果
s3，因為設計師把我們看到的類似 Flash 的動畫逐幀匯出成一張大圖，再加上合適的steps和動畫時間，就看到了人人網首頁的那般順滑的動畫效果！ 注意，為了保持最後停止的狀態，還要加一個forwards，這裡不是本文重點，就不細說了。
再考考你有沒有搞清楚
steps：為什麼圖片是20幀，可是設定成steps(12)呢？因為
steps是設定的每一步動畫的跳躍步數，而不是整個動畫的跳躍步數。舉個例子：
上面的程式碼指的是
0%~50%之間有10個跳躍，50%~100%之間有10個跳躍。而不是0%~100%之間有10個跳躍。
呼呼，終於理清了steps的作用。感覺這個過程就是漸進增強的體驗，一開始使用者只能體驗s1，後來有了css3，可以體驗美妙的動畫了，就像s3。但願以後我們能夠做到讓每一個使用者都滿意。