使用 will-change 屬性提高動畫效能

在建立動畫和其他 GPU 重要動作時,瞭解 will-change 屬性非常重要。

CSS 關鍵幀和 transition 屬性都使用 GPU 加速。通過將計算解除安裝到裝置的 GPU 來提高效能。這是通過建立解除安裝到 GPU 以進行計算的繪製圖層(單獨渲染的頁面部分)來完成的。will-change 屬性告訴瀏覽器什麼是動畫,允許瀏覽器建立更小的繪製區域,從而提高效能。

will-change 屬性接受以逗號分隔的屬性列表以進行動畫處理。例如,如果你計劃轉換物件並更改其不透明度,則應指定:

.Example{
    ...
    will-change: transform, opacity;
}

注意: 謹慎使用 will-change。為頁面上的每個元素設定 will-change 可能會導致效能問題,因為瀏覽器可能會嘗試為每個元素建立繪製層,從而顯著增加 GPU 完成的處理量。