總結解決CSS3動畫卡頓方案

1.儘量使用transform做動畫，避免使用height,width,margin,padding等；

原因是：
根據定義，CSS 的transform屬性不會更改元素或它周圍的元素的佈局。transform屬性會對元素的整體產生影響，它會對整個元素進行縮放、旋轉、移動處理。

這對瀏覽器來說是個好訊息 ！瀏覽器只需要一次生成這個元素的點陣圖，並在動畫開始的時候將它提交給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 */
}