怎麼解決css中動畫卡頓的問題

總結解決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 {   
    -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 */}

#

以上是怎麼解決css中動畫卡頓的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！