小編以乙個運動的小車為例子，講述了三種實現html5動畫的方式，思路清晰，動畫不僅僅是canvas，還有css3和j**ascript.通過合理的選擇，來實現最優的實現。
ps：由於顯示卡、錄製的幀間隔，以及可能你電腦處理器的原因，**過程可能有些不太流暢或者失真！
分三種方式實現：
(1) canvas元素結合js
(2) 純粹的css3動畫（暫不被所有主流瀏覽器支援，比如ie）
(3) css3結合jquery實現
知道如何使用css3動畫比知道如何使用元素更重要：因為瀏覽器能夠優化那些元素的效能(通常是他們的樣式，比如css)，而我們使用canvas自定義畫出來的效果卻不能被優化。原因又在於，瀏覽器使用的硬體主要取決於顯示卡的能力。目前，瀏覽器沒有給予我們直接訪問顯示卡的權力，比如，每乙個繪畫操作都不得不在瀏覽器中先呼叫某些函式。
1.canvas
html**：
複製**
**如下:
animation in html5 using the canvas element
your browser does not support the-element.please think about updating your brower!
js**：
定義一些變數：
複製**
**如下:
var dx=5, //當前速率
rate=1, //當前**速度
ani, //當前動畫迴圈
c, //畫圖(canvas context)
w, //汽車[隱藏的](canvas context)
grassheight=130, //背景高度
caralpha=0, //輪胎的旋轉角度
carx=-400, //x軸方向上汽車的位置(將被改變)
cary=300, //y軸方向上汽車的位置(將保持為常量)
carwidth=400, //汽車的寬度
carheight=130, //汽車的高度
tiresdelta=15, //從乙個輪胎到最接近的汽車底盤的距離
axisdelta=20, //汽車底部底盤的軸與輪胎的距離
radius=60; //輪胎的半徑
為了例項化汽車canvas(初始時被隱藏)，我們使用下面的自執行的匿名函式
複製**
**如下:
(function())();
點選「play」按鈕，通過定時重複執行「畫汽車」操作，來模擬「幀**」功能：
複製**
**如下:
function play(s)else
} 加速，減速，通過以下方法，改變移動距離的大小來實現：
複製**
**如下:
function speed(delta)
頁面載入的初始化方法：
//init
function init()
主調方法：
複製**
**如下:
function drawcanvas()
} 畫背景：
複製**
**如下:
function drawgrass()
畫車身：
複製**
**如下:
function drawcar()
畫輪胎：
複製**
**如下:
function drawtire(x,y)
由於原理簡單，並且**中作了詳細注釋，這裡就不一一講解！
2.css3
你將看到我們未通過一句js**就完全實現了和上面一樣的動畫效果：
html**：
複製**
**如下:
animations in html5 using css3 animations
css**：
body
定義車身與輪胎轉到的動畫（你會看到基本每乙個動畫都有四個版本的定義：原生版本/webkit【chrome|safari】/ms【為了向後相容ie10】/moz【firefox】）
複製**
**如下:
/*定義動畫：從-400px的位置移動到1600px的位置 */
@keyframes caranimation
/* 指定初始位置，0%等同於from*/
100% /* 指定最終位置,100%等同於to*/
} /* safari and chrome */
@-webkit-keyframes caranimation
100%
} /* firefox */
@-moz-keyframes caranimation
100%
} /*ie暫不支援,此處定義是為了向後相容ie10*/
@-ms-keyframes caranimation
100%
} @keyframes tyreanimation
100%
} @-webkit-keyframes tyreanimation
100%
} @-moz-keyframes tyreanimation
100%
} @-ms-keyframes tyreanimation
100%
} #container
#car
/*車身*/
#chassis
/*輪胎*/
.tire
#fronttire
#backtire
#grass
.hr,.vr
.hr
.vr
3.jquery與css3
這是乙個效果與相容性俱佳的方式（特別對於ie9暫不支援css3而言）
html**（可以看到與css3中的html**並無不同）：
複製**
**如下:
animations in html5 using css3 animations
css:
js**：
首先引入**api：
複製**
**如下:
實現動畫**（相當簡潔）：
複製**
**如下:
簡單講解：prefix首先識別出當前是哪個定義被採用了（-o?-moz?-webkit?-ms?），然後定義了動畫的起點位置和終點位置。接 著，定義了設定旋轉角度的函式（該函式將在在動畫的每一步(step)中執行）。然後，定義了乙個動畫，該定義方式導致了無限自迴圈呼叫！
本文，通過乙個簡單的動畫例項，演示了html5下，實現動畫的幾種常見方式。
本文標題: html5實現動畫效果的方式彙總
本文位址:
html5實現刮刮卡效果
通過canvas實現的可刮塗層效果.修改img.src時塗層也會自動適應新的尺寸.修改layer函式可更改塗層樣式.塗層 可刮效果 以下是html源 已增加移動裝置支援 12 3456 78910 1112 1314 1516 1718 1920 2122 2324 2526 2728 2930 3...
HTML5實現刮獎效果
原文 html5實現刮獎效果 要實現刮獎效果，最重要的是要找到一種方法 當刮開上層的塗層是就能看到下層的結果。而html5的canvas api中有乙個屬性globalcompositeoperation，這個屬性有多個值，而實現刮獎效果要用到的值就是destination out。意思就是 在已有...
HTML5實現刮獎效果
原文 html5實現刮獎效果 要實現刮獎效果，最重要的是要找到一種方法 當刮開上層的塗層是就能看到下層的結果。而html5的canvas api中有乙個屬性globalcompositeoperation，這個屬性有多個值，而實現刮獎效果要用到的值就是destination out。意思就是 在已有...