@keyframes 規則用於建立動畫。
在 @keyframes 中規定某項 css 樣式，就能建立由當前樣式逐漸改為新樣式的動畫效果。
css**：
div/*常見動畫規則case為背景色由紅色變為藍色*/
@-webkit-keyframes caseto}
將以上css**加入到頁面中就可以看到效果啦o(∩_∩)o
注：@keyframes一定要結合animation才能實現動畫效果
animation，
animation
其他文章會詳解介紹。
internet explorer 10、firefox 以及 opera 支援 @keyframes 規則和 animation 屬性。
chrome 和 safari 需要字首 -webkit-
firefx需要字首：-moz-
opera：-o-
css3動畫屬性系列之transform
1 scale x,y 對元素進行縮放 x表示水平方向縮放的倍數 y表示垂直方向的縮放倍數 y是乙個可選引數，沒有設定的話，則表示x，y兩個方向的縮放倍數是一樣的。並以x為準 transform scale 2,2.5 2 scalex 元素只在x軸 水平方向 縮放元素。預設值是1，基點一樣在元素的...
css3 動畫系列（一）
其實w3c上的教程已經很清楚了，我也建議大家去看看w3c上的教程 1 使用js對dom節點操作進行變換會帶來大量重排 重繪，使得頁面效能不佳 2 css3 動畫啟用的是硬體加速 gpu 而且對gpu的消耗很小 主要的的有點就是以上兩點了。至於缺點，就是相容性的問題。可能你為了寫乙個小動畫要寫幾十行甚...
CSS3動畫之逐幀動畫
要了解 css3 逐幀動畫，首先要明確什麼是逐幀動畫。看一下維基百科中的定義 我們兒時的記憶，手翻書，他所實現的就是逐幀動畫 在細聊 css3 逐幀動畫之前，我們先大致了解下前端實現逐幀動畫有哪些方案。下面我們仔細自己分析下這三種技術是怎麼實現上述條件的 但其缺點也是很明顯的 js 與 css3，一...