本頁面由 Cloud Translation API 翻譯而成。

如何建立高效能 CSS 動畫

Kayce Basques

Rachel Andrew

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

請參閱「為什麼某些動畫緩慢？」一節，瞭解這些建議背後的原理。

瀏覽器相容性

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

transform

瀏覽器支援

來源

opacity

瀏覽器支援

來源

will-change

瀏覽器支援

來源

移動元素

如要移動元素，請使用 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;
  }
}

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

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

強制建立圖層

如為什麼某些動畫速度很慢？一文所述，將元素放在新圖層上，瀏覽器即可重新繪製這些元素，而無需重新繪製其餘的版面配置。

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

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

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

但是，規格建議僅針對一律會變更的元素執行這項操作。舉例來說，使用者滑入和滑出側欄時，就可能發生這種情況。對於不會經常變更的元素，建議在可能發生變更時，使用 JavaScript 套用 will-change。請務必讓瀏覽器有足夠的時間執行必要的最佳化作業，並在變更停止時移除屬性。

如果您要在不支援 will-change 的瀏覽器 (最有可能是 Internet Explorer) 中強制建立圖層，您可以設定 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));
  }
}

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