前幾天剛好看到乙個用了css3幀動畫的頁面，對它非常感興趣，就研究了一下，記錄在下面，供以後開發時參考，相信對其他人也有用。
ps：以後別人問我用過什麼css3屬性的時候，我也可以不用說常見的animation，transform這些了，我可以說幀動畫這個高大上的術語了哈哈。
本篇文章參考了：css3 animation的steps方式過渡，css遮罩mask。
幀動畫其實就是css3中animation中的steps。它能夠把靜態處理為動態。原理是不斷地切換，從而讓「動」起來。
下面我通過2個示例來進行說明。
你可以從我的部落格左上方的公告下面那個會動的兔斯基看到這個示例。(暫不支援移動端)(這個兔斯基不是gif！！！)
它的**如下：
/* 兔斯基幀動畫 */
@-webkit-keyframes rabbit
100%
}@keyframes rabbit
100%
}div.myrabbit
本來這個用steps(4)的地方是用linear的，linear表示整個動畫過程是平滑的，而用steps(4)表示整個動畫過程分為4幀，不是平滑的。
steps(4)還可以接受第二個引數，值是step-start或step-end，前者表示第一幀是從0px -0%開始的，然後逐漸遞增；後者表示第一幀是從0px -100%開始的，然後逐漸遞增。詳細的可以參考：深入理解css3 animation 幀動畫。
steps(4)是對每一段動畫而言的，如果有乙個2段的動畫，那麼每一段將會分為4幀。於是我們可以把上面的**改為如下。（這個時候就是steps(2)了）
/* 兔斯基幀動畫 */
@-webkit-keyframes rabbit
50%
100%
}@keyframes rabbit
50%
100%
}div.myrabbit
/* 潑墨幀動畫 */
@-webkit-keyframes masky
100%
}@keyframes masky
100%
}div#home
裡面用到了mask屬性，這個是css3的遮罩屬性。
css3的遮罩屬性mask必須寫在整個包含塊裡面，比如我就寫在了home裡面。不能建立乙個position為absolute/fixed的遮罩層來專門放它！
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 或...