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

如何建立高效能 CSS 動畫

Kayce Basques

Rachel Andrew

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

請參閱「為什麼有些動畫速度較慢？」一節，背後的理論

瀏覽器相容性

本指南建議的所有 CSS 屬性均具備良好的跨瀏覽器功能聯絡。

transform

瀏覽器支援

資料來源

opacity

瀏覽器支援

資料來源

will-change

瀏覽器支援

資料來源

移動元素

如要移動元素，請使用 translate 或 rotation 關鍵字值 transform 資源。

舉例來說，如要將項目滑動到檢視畫面中，請使用 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);
  }
}

調整元素大小

如要調整元素大小，請使用 scale 關鍵字值 transform 資源。

.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;
}

不過，規格表示您應該只對變更。舉例來說，假如使用者能在側欄中滑入並。對於不常變更的元素，我們建議在可能會發生變更的情況下，will-change 使用 JavaScript。請務必讓瀏覽器有足夠的時間執行必要的最佳化作業，並移除屬性。

如何在不支援 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));
  }
}