摘要：網頁逐幀動畫的實現方式網頁中的逐幀動畫，大致可分為兩大類的實現方式，分別是使用控制，和單純使用實現，兩者的優劣總體概括來說就是動畫可控性更強，但開銷大，實現復雜。

網頁中的逐幀動畫，大致可分為兩大類的實現方式， 分別是使用JS控制，和單純使用CSS實現，兩者的優劣總體概括來說就是： JS動畫可控性更強，但開銷大，實現復雜。 CSS動畫實現相對JS更簡單。
常見的網頁動畫形式參考：mark? 9種網頁動畫常用實現方式總結
PS：江湖傳言CSS動畫性能更佳，可web環境過于復雜，哪個性能好可能需要參照具體情況測試， 這里有篇博客較為系統地闡述了css與JS動畫在性能上的比較： mark? 消除疑問：CSS動畫 VS JavaScript

另外在JS控制的動畫中，又可分為JS控制的canvas動畫， SVG動畫，以及直接控制圖片，元素的位置來實現的動畫。一句話，JS動畫更復雜。

css逐幀動畫是通過不斷變換keyframes中每個階段的背景來實現，比如0%處和100%處分別使用不同的background就實現了最簡單的畫面切換。 一般的做法是先將動畫的不同幀做成一張雪碧圖，然后不斷變換background-position來達到變換效果， 但是直接使用會有這樣的問題： css動畫默認的動畫過渡方式的平滑的，平滑的過渡對逐幀動畫會造成類似滑動的效果，所以需要動畫時間函數animation-timing-function中的steps屬性來設置過渡方式，這里先上demo對比：

使用steps時間函數與常規時間函數實現逐幀動畫的對比

這兩個動畫的區別僅在animation中時間函數參數：

.above:hover {
  -webkit-animation: run .6s steps(1,start) infinite;
}  /* 使用steps實現逐幀動畫*/

.down:hover {
  -webkit-animation: run .6s linear infinite;
} /* 常規時間函數linear產生平滑的滑動效果*/

對于steps屬性的理解，我翻過好幾篇博客，但有點越講越邪乎，我的理解，該屬性用于控制動畫關鍵幀的過渡(補間)方式， 常規的css動畫過渡，都是平滑的， 正如上面demo中所展示， 瀏覽器會自動為關鍵幀的間隔中插入補間動畫(學過flash的朋友對這幾個概念應該很熟悉) ，以便視覺上不會出現閃爍， css控制過渡方式的屬性是animation-timing-function ，它的值除了可以設置貝塞爾曲線Cubic-bezier(類似的ease，linear等也屬于曲線函數) 還有就是我們的steps，該屬性的語法為steps(number， start|end) 接受兩個參數，第一個參數為正整數，將一段動畫分成number段，第二個參數為為關鍵幀的變化位置， 默認為end，關于start和end的詳細講解也可以參考這里：
mark?CSS3 timing-function: steps() 詳解

但上面這篇博客中的例子并不直觀，我自己做了個例子，可能有助理解，steps將動畫分成n段（n為第一個參數） 也就是設置補間動畫的間隔數，比如從白色到黑色的過渡，常規曲線函數會漸進地補間其中的灰色， 而如果將設置為steps(2)，則中間的補間只有一個rgb都為125的灰色，而start與end可以理解為關鍵幀的跳躍時機， 設置為start的時候，關鍵幀在0秒完成跳躍，由于在0秒已經完成了跳躍，所以我們視覺上所見的也就是第一個關鍵幀之后的一幀，這也可以解釋下面的demo(對比demo中steps的設置便于理解)：
理解steps時間函數

扯得太遠，讓我們回到逐幀動畫， 以上demo解釋了逐幀動畫的實現基礎，也就是將其第一個參數設為steps(1) ，意味著將不對動畫分段，也就是不插入補間動畫，這樣也就實現了逐幀播放，由于steps這個特性，反之，如果我們將動畫只設置兩個關鍵幀，由steps(4)來分段，那么就省去了手動設置keyframes中的百分比關鍵幀。
于是在對比demo中，我們可以加入另一個實現同樣效果的動畫：

@keyframes run2 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -800px 0; /* 直接將后關
    鍵幀設置為圖片末尾，在animation屬性設置中就可以利
    用steps分段的特性來省去手動設置keyframes
    */
  }
 
}

附一篇類似博客作參考：
mark? CSS3 實現奔跑動畫
這博客今天寫得貌似很啰嗦，回家吃飯了~