1.盡量使用transform做動畫，避免使用height,width,margin,padding等；
原因是：
根據定義，CSS 的transform屬性不會更改元素或它周圍的元素的布局。transform屬性會對元素的整體產生影響，它會對整個元素進行縮放、旋轉、移動處理。
這對瀏覽器來說是個好消息 ！瀏覽器只需要壹次生成這個元素的位圖，並在動畫開始的時候將它提交給GPU去處理 。之後，瀏覽器不需要再做任何布局、 繪制以及提交位圖的操作。從而，瀏覽器可以充分利用 GPU 的特長去快速地將位圖繪制在不同的位置、執行旋轉或縮放處理。
對於高度較慢的原因：
在動畫的每壹幀中，瀏覽器都要執行布局、 繪制、 以及將新的位圖提交給 GPU。我們知道，將位圖加載到 GPU 的內存中是壹個相對較慢的操作。
瀏覽器需要做大量工作的原因在於每壹幀中元素的內容都在不斷改變。改變壹個元素的高度可能導致需要同步改變它的子元素的大小，所以瀏覽器必須重新計算布局。布局完成後，主線程又必須重新生成該元素的位圖。
2.要求較高時，可以開啟瀏覽器開啟GPU硬件加速。
比如：
壹、現在，像Chrome, FireFox, Safari, IE9+和最新版本的Opera都支持硬件加速，當它們檢測到頁面中某個DOM元素應用了某些CSS規則時就會開啟，最顯著的特征的元素的3D變換。
.cube {
-webkit-transform: translate3d(250px,250px,250px)
rotate3d(250px,250px,250px,-120deg)
scale3d(0.5, 0.5, 0.5);}二、可是在壹些情況下，我們並不需要對元素應用3D變換的效果，那怎麽辦呢？這時候我們可以使用個小技巧“欺騙”瀏覽器來開啟硬件加速。
雖然我們可能不想對元素應用3D變換，可我們壹樣可以開啟3D引擎。例如我們可以用transform: translateZ(0); 來開啟硬件加速 。
.cube {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0); /* Other transform properties here */}在 Chrome and Safari中，當我們使用CSS transforms 或者 animations時可能會有頁面閃爍的效果，下面的代碼可以修復此情況：
.cube {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000; /* Other transform properties here */}