用程序做過動畫的同學再看下面的這篇講解，或許會非常熟悉（不同程序寫動畫語法可能稍微不太一樣，但很多的思想和原理都是相同的）。
1、再介紹css3動畫前，先普及一下一些動畫相關的概念：
幀(frame)：通過去的膠片電影一樣，幾十張圖連起來放就是動畫，一張圖就是一幀，人眼識別的極限大概是24幀/秒（看不出間斷）。而即便是黑科技滿天飛的今天，動畫的基本組成部分也離不開“幀”。
補間動畫(Tween Animation)：從某一幀過度到另一幀有一定數學規律的連貫的動畫。比如一個圖片從a點勻速運動到b點的動畫、亦或是勻變速運動、以拋物線的速度曲線運動等等，當然也不只是規定運動，也可以規定動畫的變化是勻變速等，如變大變小、圓變方、變色、旋轉等。
2、簡單說說css3動畫執行的原理
（1） css3中新增了一個animation的屬性，該屬性類似於創建一個animation對象
如：animation: bounce 2.0s infinite ease-in-out;
animation有以下幾個參數：
| 屬性 | 描述 | CSS |
|---|---|---|
| animation | 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。 | 3 |
| animation-name | 規定 @keyframes 動畫的名稱。 | 3 |
| animation-duration | 規定動畫完成一個周期所花費的秒或毫秒。默認是 0。 | 3 |
| animation-timing-function | 規定動畫的速度曲線。默認是 "ease"。 | 3 |
| animation-delay | 規定動畫何時開始。默認是 0。 | 3 |
| animation-iteration-count | 規定動畫被播放的次數。默認是 1。 | 3 |
| animation-direction | 規定動畫是否在下一周期逆向地播放。默認是 "normal"。 | 3 |
| animation-play-state | 規定動畫是否正在運行或暫停。默認是 "running"。 | 3 |
| animation-fill-mode | 規定對象動畫時間之外的狀態。 | 3 |
除了第一個，我依次介紹：
animation-name:這里是一個鍵值，通過@keyframes 該鍵值{ 每幀畫面 }，從0%幀~n%幀的動作變化（注：后面詳細說明）
animation-duration:一輪動畫總時間s或ms
animation-timing-function:補間動畫規則（注：后面詳細說明）
animation-delay:動畫是否延時播放，延時多少s或ms
animation-iteration-count:動畫是否循環，循環多少次，無限循環是“infinite”
animation-direction:正向播放完再逆向播放是“alternate”，只正向播放是“normal”
animation-play-state:控制動畫運行或暫停，暫停是“paused”，運行是“running”（一般是通過js來控制這個屬性）
animation-fill-mode:屬性規定動畫在播放之前或之后，其動畫效果是否可見。（效果在keyframes 中設定）
“none”不改變默認行為。
“forwards”當動畫完成后，保持最后一個屬性值（在最后一個關鍵幀中定義）。
“backwards”在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。
“both”向前和向后填充模式都被應用。
（2）通過上面創建了animation的對象后，我們就可以一幀一幀的畫圖了
在animation-name中定義了一個key值，用它來構建每幀的樣式，如下例：
from是開始時樣式，to是結束時樣式，意思就是從“from”的樣式到“to”的樣式的變化，比如說from里面背景色是藍色，to里面背景色是紅色，動畫會從藍色變成綠色
下面是效果圖：
當然，我們也可以從0%幀~n%幀設置動作變化，如下例：
如上段代碼，藍色->紅色->黃色->黑色 的轉變，效果圖如下：
（3）如何理解和應用 animation-timing-function“補間動畫”
這個屬性有下面幾個參數：
linear：勻速變化
ease：低速開始，然后加快，快結束的時候再放慢
ease-in：低速開始
ease-out：低速結束
ease-in-out：低速開始、低速結束
cubic-bezier(n,n,n,n)：n=0~1，自定義“三次貝賽爾曲線”速度變化方式
step：把每個區域變化樣式分割成了n幀，start+end幀總計n+1幀
step-start(n)或steps(n,start)：不算start幀的n幀（相當於從第2幀開始）
step-end(n)或steps(n,end)：不算end幀的n幀（相當於結束於倒數第2幀）
①、linear和ease的對比運動的例子如下：
代碼如下：
②、然后介紹一下steps函數，第一個參數是每個區域拆分的幀數，為了方便觀察，我把它設置為1幀，例子如下：
如下代碼所示：顏色變化分為紅、綠、藍、黃，
第一個圖沒有紅，也就是說step-start從第2幀開始，
第二個圖缺少黃，同樣是說step-end到倒數第2幀結束。
如上段代碼，steps的拆分規則是以一段區間拆分，
即0%~25%的區間拆分n幀，相當於0%幀是start幀，
25%~50%的區間拆分n幀，無start、end幀，
50%~100%的區間拆分n幀，相當於100%幀是end幀，
而n幀是包含start或end幀總共的幀數為n，並且start幀、end幀只能有其一
③、最后一個：animation-timing-function補間動畫中有一個“三次貝賽爾曲線”
首先百度上先腦補一下什么叫“三次貝塞爾曲線”：貝塞爾曲線_百度百科
感興趣的同學可以研究研究，不過看完之后也只能“呵呵。。。”
舉個最簡單的例子：ps中不是有個鋼筆的工具嗎，效果圖如下
這種效果就是“三次貝塞爾曲線”，然后再細想一下運動的速度是如同該曲線一樣的效果，弧度越大越陡變化速度越快，越小越平緩變化速度越慢
（4）最后再來說說animation-fill-mode，這是控制動畫播放完時所顯示的狀態，下面解釋摘錄自百度
none 表示不設置結束之后的狀態，默認情況下回到跟初始狀態一樣。
forwards 表示將動畫元素設置為整個動畫結束時的狀態。
backwards 明確設置動畫結束之后回到初始狀態。
both 表示設置為結束或者開始時候的狀態。一般都是回到默認狀態。
下面再舉個例子看看就明白了：
下面是代碼：
（5）其實，介紹到目前就已經可以做出完整的動畫效果了（逐幀動畫），下面我通過上面的介紹繪制一個
下面是sprite素材圖：
下面是代碼：
①、在@keyframes中只設置了一個過渡區間，而這里的animation-timing-function用steps(4)給這個過渡區間分成4幀，正如素材圖的前4幀
②、我們把容器的大小調整至素材圖中一個幀圖的大小，讓div剛好能顯示一幀的圖片
③、設置初始位置x=0px、和運動結束時的位置x=-128px，因為在這之間給分成了4幀（即steps(4)），因此它的運動軌跡分析如下：
第1幀：background-position：x=0px，顯示第1個小人
第2幀：background-position：x=-32px，顯示第2個小人
第3幀：background-position：x=-64px，顯示第3個小人
第4幀：background-position：x=-96px，顯示第4個小人
而steps(4)等同於step-end(4)，因此最后一個關鍵幀background-position：x=-128px不顯示，如此循環便可
寫到這就算把animation詳細的介紹完了，感興趣的同學咱們多多交流哈，我是Chalk ~~O(∩_∩)O~~
下一篇文章我會繼續寫css3的動畫，來談談transform屬性。