新式瀏覽器能以低成本為兩個 CSS 屬性建立動畫：transform 和 opacity。為其他內容建立動畫時，很可能就不太可能達到每秒 60 個影格 (FPS) 的流暢感。這篇文章說明原因。
動畫效能和畫面更新率
許多人都認為，為網路上的任何內容製作動畫時，會將 60 FPS 的畫面更新率設為 60 FPS。 這個畫面更新率可確保動畫順暢呈現。在網路上，影格是指完成更新及重新繪製畫面所需的一切工作時間。如果每個影格未能在 16.7 毫秒 (1000ms / 60 incognito 16.7) 完成，使用者就會察覺延遲。
轉譯管道
如要在網頁上顯示內容，瀏覽器必須執行下列依序步驟：
- 樣式：計算套用至元素的樣式。
- 版面配置：產生每個元素的幾何圖形和位置。
- 色調：將每個元素的像素填滿圖層。
- 複合元素：在螢幕上繪製圖層。
這四個步驟稱為瀏覽器的「轉譯管道」。
當您在已載入這些步驟的頁面中建立動畫時，必須再次發生。這個過程是從需要變更的步驟開始，讓動畫能夠發生。
如前所述，這些步驟會依序。舉例來說，如果您為會變更版面配置的項目建立動畫，繪製和複合步驟也必須再次執行。因此，比起只變更組合內容的動畫效果，為變更版面配置的內容製作動畫需要耗費較多成本。
建立版面配置屬性動畫
版面配置變更會計算受此變更影響的所有元素的幾何圖形 (位置和大小)。如果您變更一個元素，可能就需要重新計算其他元素的幾何圖形。舉例來說，如果您變更 <html> 元素的寬度，可能會影響其任何子項的寬度。由於元素會溢位並影響另一個元素，所以在樹狀結構較下方進行的變更，有時可能會導致版面配置一直回到頂端。
可見元素的樹狀結構越大，執行版面配置計算所需的時間就越長。
為繪製屬性建立動畫效果
「Paint」是一項程序，可讓您決定在畫面上繪製哪些順序元素。通常是管道中所有工作最長執行的時間。
大部分新版瀏覽器中的繪製作業是在軟體光柵化工具中完成。視應用程式中元素分成不同層的方式而定，除了變更的元素外，其他元素可能也需要繪製。
為複合屬性建立動畫效果
合成是指將頁面分割為圖層的過程，將頁面外觀轉換為像素 (光柵化)，以及將圖層組合在一起來建立頁面 (合成) 的程序。
這就是為什麼 opacity 屬性會併入費用較低的動畫項目清單中。只要這個屬性位於其本身的層，GPU 就能在合成步驟中處理對屬性所做的變更。Chromium 瀏覽器和 WebKit 會為 opacity 上有 CSS 轉換或動畫的任何元素建立新圖層。
什麼是圖層？
將要添加動畫效果或會轉換到新圖層的項目放在新圖層上，瀏覽器只需要重新繪製這些項目，其他項目則不需要。你或許已經熟悉 Photoshop 的圖層概念，這個圖層可以同時移動多項元素。瀏覽器算繪圖層的概念與前述概念相似。
雖然瀏覽器會擅長判斷新層應包含哪些元素，但如果遺漏任何元素，也可以選擇強制建立圖層。相關資訊請見「如何建立高效能動畫」。不過，由於每個圖層都會使用記憶體，因此建立新圖層時應格外謹慎。在記憶體有限的裝置上建立新層，可能會導致效能問題比您要解決的效能問題更嚴重。此外，每一層的紋理都必須上傳至 GPU。因此，CPU 和 GPU 之間的頻寬限制可能會相當有限。
CSS 與 JavaScript 的成效
你可能會想知道：從效能的角度來看，使用 CSS 或 JavaScript 製作動畫的效果是否更好？
CSS 動畫和網頁動畫 (在支援 API 的瀏覽器中) 通常會在名為合成器執行緒的執行緒上處理。這與瀏覽器的「主執行緒」不同，在執行樣式、版面配置、繪製和 JavaScript 的情況下。也就是說，如果瀏覽器在主執行緒上執行一些昂貴的工作，這些動畫可以持續進行，而不會中斷。
如本文所述，在許多情況下，其他轉換和不透明度的變更也可由合成器執行緒處理。
如果有任何動畫觸發了繪製和/或版面配置的觸發事件，則需要主要執行緒執行工作。CSS 和 JavaScript 動畫都是如此，而版面配置或繪製作業的負擔，可能會使與 CSS 或 JavaScript 執行有關的任何工作混淆，以呈現問題表情符號。