動畫必須取得良好成效，否則會對使用者體驗造成負面影響。
製作動畫時，請一律採用 60fps，因為這樣減少會造成使用者註意到的延遲或停頓點，使用者就會明顯感受到負面影響。
- 請務必留意動畫不會造成效能問題，請務必瞭解動畫特定 CSS 屬性可能造成的影響。
- 為變更網頁幾何圖形 (版面配置) 或造成畫作變化的動畫屬性特別高昂。
- 請盡可能堅持變更轉換及不透明度。
- 請使用
will-change確保瀏覽器知道您要製作動畫的內容。
動畫屬性並非免費，且某些屬性會比其他屬性更便宜。舉例來說，為元素 width 和 height 建立動畫效果會改變元素的幾何圖形，並可能導致網頁上的其他元素移動或變更大小。這個過程稱為「版面配置」 (或 Gecko 型瀏覽器中的「重排」)，如果網頁含有大量元素，可能耗用昂貴的成本。觸發版面配置時，通常需要繪製網頁或其中一部分的網頁，因此通常比版面配置作業費用要高。
請盡可能避免為會觸發版面配置或繪製的屬性加入動畫效果。對大部分的新式瀏覽器而言，這表示將動畫限制在 opacity 或 transform 內，而這兩種瀏覽器都可大幅最佳化，因為動畫是由 JavaScript 或 CSS 處理。
請參閱完整指南，瞭解如何製作高效能動畫。
使用 will-change 屬性
請使用 will-change，確保瀏覽器知道您要變更元素的屬性。這樣一來，當您進行變更時，瀏覽器就會優先採用最適當的最佳化設定。不過，請勿過度使用 will-change，以免瀏覽器浪費資源，進而造成更多效能問題。
原則上，如果動畫可能會在 200 毫秒內觸發 (無論是由使用者的互動或應用程式的狀態所觸發)，就適合建立動畫元素 will-change。在大多數情況下，凡是應用程式目前檢視畫面中您想建立動畫的元素，都應該為要變更的屬性啟用 will-change。以我們在先前的指南中用過的方塊範例為例，新增 will-change 做為轉換和不透明度的例子，如下所示：
.box {
will-change: transform, opacity;
}
現在，支援這項功能的瀏覽器 (目前最新的瀏覽器) 將自動進行適當的最佳化調整，以支援變更或動畫屬性。
CSS 與 JavaScript 的成效
網路上有許多網頁和留言串，會從效能的角度探討 CSS 和 JavaScript 動畫的相對優點。請注意以下幾點：
如果原生支援 CSS 型動畫和網頁動畫，則通常在稱為「合成器執行緒」的執行緒上進行處理。這與瀏覽器的「主執行緒」不同，後者會執行樣式、版面配置、繪製和 JavaScript。也就是說，如果瀏覽器在主執行緒上執行一些昂貴的工作，這些動畫會持續顯示而不會中斷。
在許多情況下，其他轉換和不透明度變更也可由合成執行緒處理。
如果有任何動畫觸發了繪製和/或版面配置的觸發事件，則需要「主執行緒」才能執行工作。不論是 CSS 還是 JavaScript 動畫，此做法都是如此，而版面配置或繪製作業的負擔，可能會使與 CSS 或 JavaScript 執行有關的任何工作混淆，使得問題顯而易見。