CSS 動畫的 steps

animation預設以ease方式過渡，會以在每個關鍵幀之間插入補間動畫，所以動畫效果是連貫性的。ease，linear等之類的過渡函式都會為其插入補間。但有些效果不需要補間，只需要關鍵幀之間的跳躍，這時應該使用steps過渡方式。本文後面有案例。

steps用法

簡單地說，就是原本一個狀態向另一個狀態的過渡是平滑的，steps可以實現分佈過渡。steps用法 :

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是設定的每一步動畫的跳躍步數，而不是整個動畫的跳躍步數。舉個例子：

CSS

@-webkit-keyframes ani{ 0%{...} 50%{...} 100%{...} } .xxx:hover{ -webkit-animation:ani 2s steps(10) ; }

1 2 3 4 5 6 7 8

@-webkit-keyframes ani{    0%{...}    50%{...}    100%{...} } .xxx:hover{    -webkit-animation:ani 2s steps(10) ; }

 

上面的程式碼指的是0%~50%之間有10個跳躍，50%~100%之間有10個跳躍。而不是0%~100%之間有10個跳躍。

呼呼，終於理清了steps的作用。感覺這個過程就是漸進增強的體驗，一開始使用者只能體驗s1，後來有了css3，可以體驗美妙的動畫了，就像s3。但願以後我們能夠做到讓每一個使用者都滿意。

參考

• 利用css3-animation來製作逐幀動畫