要了解 css3 逐幀動畫，首先要明確什麼是逐幀動畫。
看一下維基百科中的定義：
我們兒時的記憶，手翻書，他所實現的就是逐幀動畫：
在細聊 css3 逐幀動畫之前，我們先大致了解下前端實現逐幀動畫有哪些方案。
下面我們仔細自己分析下這三種技術是怎麼實現上述條件的：
但其缺點也是很明顯的：
js 與 css3，一般是將動畫幀放到背景圖中。
其中有乙個伸手取飯盒的動畫，一共有19幀，且在第11幀處有乙個互動，將雪碧圖放入背景中，通過不同的樣式實現不同的background-position，使用 js 改變樣式名：
1234567
.sprite-rice-1,.sprite-rice-2,
….sprite-rice-19
1234
.sprite-rice-1.sprite-rice-2
….sprite-rice-19
使用 js 的優點是相容性佳，互動靈活。
在移動端，css3 animation 相容性良好，相對於 js，css3 逐幀動畫使用簡單，且效率更高，因為許多優化都在瀏覽器底層完成。
因此在觸屏頁面中 css3 逐幀動畫使用廣泛，下文將對其進行詳細介紹。
在觸屏頁面中，動畫往往承擔頁面樣式實現的角色（即不需要替換），因此我們會將放到元素的背景中（background-image）。
逐幀動畫有不同的動畫幀，我們可以通過更改background-image的值實現幀的切換，但多張會帶來多個 http 請求，且不利於檔案的管理。
比較合適的做法，是將所有的動畫幀合併成一張雪碧圖（sprite），通過改變background-position的值來實現動畫幀切換。因此，逐幀動畫也被稱為「精靈動畫（sprite animation）」。
以京東到家的觸屏頁面《年貨送到家》為例：
這個動畫乙個有三幀，將3個動畫幀合併，並放到.p8 .page_key的背景中：
123456
.p8steps 指定了乙個階梯函式，包含兩個引數：.page_key
（參考自w3c）
回到上述的例子，我們在 keyframes 中定義好每個動畫幀：
123456
@-webkit-keyframes p8然後，給他加上33.33%
66.66%
100%
}
animation：
123
.p8為什麼第乙個引數是1？.page_key
前文中提到，steps 是animation-timing-function的乙個屬性值，在 w3c 中有如下說明：
也就是說，animation-timing-function應該於兩個 keyframes 之間，而非整個動畫。在上面的 keyframes 中，我們已經把每個幀都寫出來了，所以兩個 keyframes 之間的間隔是1。
更加簡便的寫法？
既然說 steps 第乙個引數是指函式的間隔數量，那麼我們就可以把 keyframes 的計算直接交給 steps 來完成。
123456
.p8以上兩種寫法效果是等同的。.page_key
@-webkit-keyframes p8
}
除了steps函式，animation-timing-function還有兩個與逐幀動畫相關的屬性值step-start與step-end：
123456
$spritewidth: 140px; // 精靈寬度我們知道，rem 的計算會存在誤差，因此使用雪碧圖時我們並不推薦用 rem。如果是逐幀動畫的話，由於計算的誤差，會出現抖動的情況。@keyframes ani
}
那麼在觸屏頁中，如何實現頁面的適配？
動畫 web開發
上次更新：2019-04-20 19:28:31
css3 逐幀動畫
animation timing function，規定動畫的運動曲線，這裡有9個值，分別是ease linear ease in ease out ease in out step start step end steps start end cubic bezier x1,y1,x2,y2 說說...
CSS3實現逐幀動畫
實現逐幀動畫一般用的 是雪碧圖 css3實現的方法是 新增animation nanimation 第乙個animation name屬性是動畫運動的方法。eg keyframes p8 ms keyframes p8 steps n,end 是表明動畫一共有多少幀，有4幀就寫成 steps 4 或...
css逐幀動畫
我們經常使用css3中的animation動畫，比如這樣 fadein keyframes fadeinto 這樣就實現了延時1s，一共0.5s的淡入動畫。其中ease是animation timing function的預設值。animation timing function使用了三次貝塞爾 c...