怎麼解決動畫卡頓

**：

總結解決css3動畫卡頓方案

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

原因是：

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

這對瀏覽器來說是個好訊息！瀏覽器只需要一次生成這個元素的點陣圖，並在動畫開始的時候將它提交給gpu去處理。之後，瀏覽器不需要再做任何布局、繪製以及提交位圖的操作。從而，瀏覽器可以充分利用 gpu 的特長去快速地將點陣圖繪製在不同的位置、執行旋轉或縮放處理。

對於高度較慢的原因：

在動畫的每一幀中，瀏覽器都要執行布局、繪製、以及將新的點陣圖提交給gpu。我們知道，將位圖載入到 gpu 的記憶體中是乙個相對較慢的操作。

瀏覽器需要做大量工作的原因在於每一幀中元素的內容都在不斷改變。改變乙個元素的高度可能導致需要同步改變它的子元素的大小，所以瀏覽器必須重新計算布局。布局完成後，主線程又必須重新生成該元素的點陣圖。

2.要求較高時，可以開啟瀏覽器開啟gpu硬體加速。

比如：

一、現在，像chrome, firefox, safari, ie9+和最新版本的opera都支援硬體加速，當它們檢測到頁面中某個dom元素應用了某些css規則時就會開啟，最顯著的特徵的元素的3d變換。

.cube

二、可是在一些情況下，我們並不需要對元素應用3d變換的效果，那怎麼辦呢？這時候我們可以使用個小技巧「欺騙」瀏覽器來開啟硬體加速。

雖然我們可能不想對元素應用3d變換，可我們一樣可以開啟3d引擎。例如我們可以用transform: translatez(0); 來開啟硬體加速。

.cube

在 chrome and safari中，當我們使用css transforms 或者 animations時可能會有頁面閃爍的效果，下面的**可以修復此情況：

.cube