CSS3提供了Animation關(guān)鍵幀動畫，我們在工作中比較常用。但在寫CSS動畫的時候，其實Animation能實現(xiàn)兩種動畫模式：

補間動畫

設(shè)置關(guān)鍵幀的初始狀態(tài)，然后在另一個關(guān)鍵幀改變這個狀態(tài)，比如大小、顏色、位置、透明度等，電腦將自動根據(jù)二者之間幀的值創(chuàng)建的動畫。

代碼:

執(zhí)行效果:

逐幀動畫

逐幀動畫沒有補間效果的，它不是電腦根據(jù)初始和結(jié)束狀態(tài)的差異自動生成中間的過渡幀，而是每一幀都是關(guān)鍵幀，需要自己定義每一幀的狀態(tài)。在Animation動畫里面通過設(shè)置 animation-timing-function:step(number)來實現(xiàn)的。

比如下圖(178 x 1122)里面有6只烏龜，實際上一只烏龜?shù)挠斡緞幼鲙?。每張圖連起來播放就是一只游泳的烏龜：

如果用補間動畫通過改變圖片的位置實現(xiàn)就是下面的效果：

用逐幀動畫實現(xiàn)代碼效果如下：

代碼：

通過上面的對比可以看出，逐幀動畫一般用在動物或人的動作變化。動畫里面比較多，主要偏向游戲類的，在大多數(shù)游戲動畫里的角色效果都是逐幀動畫。逐幀動畫就像拍電影一樣的，獨立的每幀圖顯示，連續(xù)動起來就是一個動作，當然更多要和美術(shù)一起合作實現(xiàn)逐幀動畫。