本頁面由 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 以外的元素移動元素的動畫，速度可能會比較慢。以下範例比較了使用 top 和 left 的動畫與使用 transform 的動畫。

錯誤做法

.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 範例中進行測試，並使用開發人員工具探索效能。