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

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

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

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

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

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