「我要一步一步往前跳，在最遠方乘著web往前飛；
小小的天……我有屬於我的天」
——題記，改編源自《蝸牛》
當我們給元素做動畫的時候，可能會用到steps，把多個拼合成一張雪碧圖，改變background-position進行動畫，簡便而又強大的屬性。如同變形金剛，「卡卡卡」，而有時又被它搞得一愣一愣的，咦，咋沒看到最後一張圖。用歸用，不由疑惑steps到底是個什麼鬼？索性來了解一下。
語法
steps(number, direction)steps作為//number指間隔數，必須為正整數，必選
//directoin接受start和end值，指定在每個間隔的起點或是終點發生階躍變化，預設end，可選
timing-function的乙個屬性，將操作的區域劃分為相同等分的間隔，也就是說每步分成n段，注意，這裡是步，不是共。比如說0，50%，100%，則會0~50%分成n步，50%~100%分成n步。上2張w3c上對於steps**並茂的介紹：
w3c關於steps的介紹文字
w3c關於steps的介紹圖例
可能我們看了還是不太清楚，直接上例子：
比如說小鳥啄地的3幀動畫，用steps實現，改變background-position切換。
原圖.png
看**：
steps(2, start)效果如下，僅在鳥2鳥3中切換（鳥1咋不見了）：
鳥2.png
鳥3.png
而steps(2,end)或者steps(2)，僅在鳥1鳥2中切換（鳥3咋不見了）：
鳥2.png
（**放在了codepen上，可遠觀可褻玩，看看是不是我說的這個事兒。）
為啥，我們以w3c的線圖來解讀。
因為只有乙個100%，steps 的2將該動畫分成2步，當選擇start時，也就是剛開始的時候0s一跳跳到1，相當於作為乙個躍點，完成階躍，這一切來的那麼快，以至於我看不見，所以我們看到的就是鳥2鳥3不斷切換。
接下來切換end：
當躍點為end時，則動畫在終點發生階躍，也就是說最後一步的最後一點，這一瞬間猝不及防，致使我啥也都看不見。steps的預設狀態是end。這也就導致平時我們可能會產生這樣的錯覺：它不會執行到最後一張，事實上是有，但階躍的我壓根看不到。但是，我們可以利用forwards來檢視，發現它最後定的圖是鳥3，如果infinite無限迴圈，鳥3的毛還是看不到的。
解決方法
方法1：在多張拼合的成果圖（雪碧圖）的末尾或開頭處再加一張一樣大小的空白圖，如此便解決了。有時候可能加跟第一張或第一張一樣的圖，具體問題具體分析~
方法2： 圖還是原始圖，改變動畫keyframes，需要多加一步50%。
@-webkit-keyframes stepsa
to /*to */
}
step-start， start-end顯示的是啥？
step-start = start(1, start)
step-end = start(1, end)
可以動手試一試~答案，別戳我
參考文章：
git探索之路
參考資料 git config global user.name your name 設定使用者名稱 git config global user.email email excample.com 設定使用者郵箱 git init 初始化倉庫 git status 查詢倉庫當前狀態，git diff...
程式設計師內心成長之路
在這個時間點，北京的五環之外已經慢慢安靜下來。現在自己的狀態是處於二人世界，感覺很好，很滿足。以前自己下班早，回到家自己做好飯等著媳婦回來。現在兩個人下班的時間差不多，然後兩個人地鐵裡碰面一起回家。到家後媳婦做飯，飯後我來洗刷碗筷。就這樣不知不覺就會到了8點左右吧。為了未來的生活，媳婦從電子商務轉行...
vuejs專案執行的探索之路
初次嘗試學習vue.js的探索之路 非常感謝該部落格主人提供的例子vueadmin 1 先安裝nodejs環境 2 進入到專案vueadmin master目錄下執行 國內被牆，報錯，然後網上查詢可以設定 用cnpm,果斷嘗試一下，執行下述命令 npm install g cnpm registry...