我們經常使用css3中的animation動畫，比如這樣：
.fadein
@keyframes fadeinto}
animation-timing-function使用了三次貝塞爾（cubic bezier）函式生成速度曲線，可以讓我們的動畫產生平滑的過渡。
但是有的時候我們並不想要平滑的過渡，比如想要實現下面小人跑動的效果，該怎麼實現呢？
或者更簡單，把雪碧圖拼成這樣：
.people
@-webkit-keyframes run
}
很多時候我們的gif動畫都可以直接用css效果實現，快來試試吧！
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 逐幀動畫，首先要明確什麼是逐幀動畫。看一下維基百科中的定義 我們兒時的記憶，手翻書，他所實現的就是逐幀動畫 在細聊 css3 逐幀動畫之前，我們先大致了解下前端實現逐幀動畫有哪些方案。下面我們仔細自己分析下這三種技術是怎麼實現上述條件的 但其缺點也是很明顯的 js 與 css3，一...
CSS3實現逐幀動畫
實現逐幀動畫一般用的 是雪碧圖 css3實現的方法是 新增animation nanimation 第乙個animation name屬性是動畫運動的方法。eg keyframes p8 ms keyframes p8 steps n,end 是表明動畫一共有多少幀，有4幀就寫成 steps 4 或...