如何建立高效能 CSS 動畫

Kayce Basques

Rachel Andrew Technical Writer

本指南說明如何建立高效能 CSS 動畫。

請參閱「為什麼有些動畫很慢？」一文，瞭解這些建議背後的理論。

瀏覽器相容性

本指南建議的所有 CSS 屬性都具備良好的跨瀏覽器支援。

transform

Browser Support

• 36
• 12
• 16
• 9

Source

opacity

Browser Support

• 1
• 12
• 1
• 2

Source

will-change

Browser Support

• 36
• 79
• 36
• 9.1

Source

移動元素

如要移動元素，請使用 transform 屬性的 translate 或 rotation 關鍵字值。

舉例來說，如要將項目滑入檢視畫面，請使用 translate。

.animate {
  animation: slide-in 0.7s both;
}

@keyframes slide-in {
  0% {
    transform: translateY(-1000px);
  }
  100% {
    transform: translateY(0);
  }
}

使用 rotate 旋轉元素。以下範例會將元素旋轉 360 度。

.animate {
  animation: rotate 0.7s ease-in-out both;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

調整元素大小

如要調整元素大小，請使用 transform 屬性的 scale 關鍵字值。

.animate {
  animation: scale 1.5s both;
}

@keyframes scale {
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

變更元素的顯示設定

如要顯示或隱藏元素，請使用 opacity。

.animate {
  animation: opacity 2.5s both;
}

@keyframes opacity {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

注意：如要複製及貼上各種動畫的範例，請前往 Animista。

避免觸發版面配置或繪製的屬性

使用任何 CSS 屬性 (transform 和 opacity 除外) 製作動畫前，請先判斷該屬性對轉譯管道的影響。除非絕對必要，否則請避免使用會觸發版面配置或繪製的屬性。

警告：如果必須使用會觸發版面配置或繪製的屬性，可能就無法維持動畫流暢度或高效能。

強制建立圖層

如「為什麼有些動畫很慢？」一文所述，將元素放在新圖層上，瀏覽器就能重新繪製這些元素，而不必重新繪製版面配置的其他部分。

瀏覽器通常可以妥善決定哪些項目應放在新圖層上，但您可以使用 will-change 屬性手動強制建立圖層。顧名思義，這個屬性會告知瀏覽器，這個元素將以某種方式變更。

注意：由於建立圖層可能會導致其他效能問題，因此不建議在最佳化程序初期使用。請只在發現圖像問題，且認為將元素升級至新圖層可能有幫助時，才使用這個屬性。

在 CSS 中，您可以將 will-change 套用至任何選取器：

body > .sidebar {
  will-change: transform;
}

不過，規格建議您只將這個屬性新增至一律會變更的元素。舉例來說，這可用於使用者可滑入和滑出的側欄。如果元素不常變更，請在可能發生變更時，使用 JavaScript 套用 will-change。請務必給予瀏覽器足夠的時間執行必要最佳化，並在變更停止時移除屬性。

如要在不支援 will-change 的瀏覽器中強制建立圖層，可以設定 transform: translateZ(0)。

對緩慢或不流暢的動畫進行偵錯

Chrome 開發人員工具和 Firefox 開發人員工具可協助您找出動畫速度緩慢或不穩定的原因。

檢查動畫是否觸發版面配置

如果動畫使用 transform 以外的方式移動元素，速度可能會變慢。以下範例比較使用 transform 的動畫，以及使用 top 和 left 的動畫。

錯誤做法

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     top: calc(90vh - 160px);
     left: calc(90vw - 200px);
  }
}

正確做法

.box {
  position: absolute;
  top: 10px;
  left: 10px;
  animation: move 3s ease infinite;
}

@keyframes move {
  50% {
     transform: translate(calc(90vw - 200px), calc(90vh - 160px));
  }
}

您可以在下列兩個範例中測試，並使用開發人員工具探索效能。

• 之前，使用 top 和 left 動畫。
• 使用 transform 後。

Chrome 開發人員工具

1. 開啟「Performance」面板。
2. 在動畫播放時記錄執行階段效能。
3. 查看「Summary」(摘要) 分頁。

如果「Summary」分頁中的「Rendering」值不為零，可能表示動畫會讓瀏覽器執行版面配置工作。

animation-with-top-left 範例會導致轉譯作業。

使用轉換的動畫範例不會造成轉譯工作。

Firefox 開發人員工具

在 Firefox 開發人員工具中，Waterfall 可協助您瞭解瀏覽器花費時間的位置。

1. 開啟「Performance」面板。
2. 在動畫播放時開始記錄效能。
3. 停止錄製，並檢查「Waterfall」分頁。

如果看到「Recalculate Style」項目， 表示瀏覽器必須返回 轉譯瀑布 的開頭，才能轉譯動畫。

檢查是否有影格遺失

1. 在 Chrome 開發人員工具中開啟「Rendering」分頁。
2. 勾選「FPS meter」核取方塊。
3. 在動畫執行時觀察這些值。

請注意「FPS meter」UI 頂端的「Frames」標籤。這會顯示 50% 1 (938 m) dropped of 1878 等值。高效能動畫的百分比很高，例如 99%，這表示影格遺失率很低，動畫看起來很流暢。

animation-with-top-left 範例會導致 50% 的影格遭到捨棄。

使用轉換的動畫範例只會導致 1% 的影格遭到捨棄。

檢查動畫是否會觸發繪製

瀏覽器繪製某些屬性的成本高於其他屬性。舉例來說，任何涉及模糊效果 (例如陰影) 的內容，繪製時間都比繪製紅色方塊長。這些差異在 CSS 中不一定很明顯，但瀏覽器開發人員工具可協助您找出需要重新繪製的區域，以及其他與繪製相關的效能問題。

Chrome 開發人員工具

1. 在 Chrome 開發人員工具中開啟「Rendering」分頁。
2. 選取「Paint Flashing」。
3. 在畫面上移動指標。

在這個 Google 地圖範例中，您可以看到元素重新繪製。

如果整個螢幕閃爍，或醒目顯示的區域不應變更，請進一步調查。

如要判斷特定屬性是否導致繪製相關效能問題，可以使用 Chrome 開發人員工具中的繪製分析器。

Firefox 開發人員工具

1. 開啟「Settings」，然後新增「Toggle paint flashing」的工具箱按鈕。
2. 在要檢查的頁面上，開啟按鈕並移動滑鼠或捲動，即可查看醒目顯示的區域。

在合成階段製作動畫

請盡可能將動畫限制為 opacity 和 transform，讓動畫保持在轉譯路徑的合成階段。使用開發人員工具，檢查動畫會影響路徑的哪個階段。

使用繪製分析器，查看是否有任何繪製作業特別耗費資源。如果發現任何問題，請檢查是否有其他 CSS 屬性可提供相同的外觀和風格，同時提升效能。

請謹慎使用 will-change 屬性，且僅在遇到效能問題時使用。