說完題外話，開始近期的主題動畫設計。雖然css3動畫基礎知識學習過，但以前項目使用場景比較少，并沒有太多的實踐，加入新團隊以來，做得幾個項目與動畫有關，嘗試用css3來實作，過程中遇到了不少坑。
大學學過一個月畫畫，但沒有這方面天賦，連簡單卡通動畫也畫不好，于是在國外網站找來如下動畫，利用它來做例子，并把這次用 css3 實作動畫的原理分享給大家~
回到項目需求，要實作類似上圖卡通人物跑步動畫，分析結果如下：
1.跑步動畫可以應用在不同的場景
要求人物的背景是透明的，圖檔保證高清，避免邊緣雜邊
2.跑步動畫運動速度與動作成正比關系
人物跑步速度越快，身體動作越快；人物跑步速度為零時，身體動作馬上停止在目前的狀态
3.跑步動畫效果流暢
不會出現卡頓現象
用ps打開該大師的 gif 圖，在時間軸視窗中有 24 張不同的圖檔，通過一幀一幀的播放來實作跑步動畫，很簡單得說明做一個精細的動畫需要多費點心思和勞動力啊，向大師表示敬禮~
項目組要求的動畫跟上圖人物大小差不多，一開始跟互動和視覺的同僚讨論時，嘗試使用 gif 來實作動畫，使用7張圖檔輪播，間隔 0.2 秒可滿足的動畫效果，簡單實作如下：
分析下gif動畫
好處：實作簡單、可維護性高、工作成本低
缺點：隻适合簡單的動畫效果，不能動态控制動畫
那麼項目的硬性要求(控制動畫的暫停、速度等)讓我放棄了對gif實作跑步的想法~
放棄了 gif，而 swf 也不是我們的選擇，canvas 實作也是可以的，這裡不做介紹，本次主題是 css3 動畫~
方式一：通過切換 7 張圖檔來實作
方式二：7 張圖檔合成 1 張，通過切換背景圖檔位置來實作
分析這2種方式
方式一：
實作起來會比較簡單，但帶來額外的 7 個請求數
7 張圖檔總大小為：50k
方式二：
需要設計雪碧圖，并量取背景位置，請求數少
雪碧圖大小為：37k
可以看出多張圖檔合成的雪碧圖比 7 張圖檔還少 13k 外，還可以減少 7 個http請求，那麼切換背景位置方式是比較好的，代碼如下：
html:
css：
加快跑步速度：可以通過快速切換背景圖檔位置，animation-duration 可以控制動畫運作的時間，那麼減少動畫的時間可以提升跑步的速度，通過在父級動态加載不同的功能 class 來運作不同的動畫，進而改變跑步速度
詳細内容請看代碼，留意注釋
css:
暫停跑步：使用 animation-play-state:paused 可以暫停正在進行的動畫，并停留到目前的動作，那麼當使用者停止操作時，給父級加上功能 class 來停止動畫
最後再通過 js 控制不同的跑步速度。
jquery:
最後界面：
animation 适合相對簡單的動畫，使用起來比較靈活，如支援切換不同的動畫名、暫定動畫等
animation-timing-function 的 step-start 屬性等不完全支援 android 2.1~4.3 、ios 4.3 系統
ok~ 跑步動畫到此結束，下期來個拆信封的動畫，敬請期待~
作者：白樹