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

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

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

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

使用steps時間函數(shù)與常規(guī)時間函數(shù)實現(xiàn)逐幀動畫的對比

這兩個動畫的區(qū)別僅在animation中時間函數(shù)參數(shù)：

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

.down:hover {
  -webkit-animation: run .6s linear infinite;
} /* 常規(guī)時間函數(shù)linear產(chǎn)生平滑的滑動效果*/

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

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

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

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

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