CSS 動畫與 JavaScript 動畫

您可以使用 CSS 或 JavaScript 製作動畫。您該使用哪一個選項？

Paul Lewis
X 首頁
Sam Thorogood

在網路上建立動畫的方式主要有兩種：使用 CSS 和 JavaScript。您選擇哪一個，其實取決於專案的其他依附元件，以及您要達到的效果類型。

摘要

  • 使用 CSS 動畫處理較簡單的「一次性」轉場效果，例如切換 UI 元素狀態。
  • 如要使用彈跳、停止、暫停、倒轉或減速等進階效果，請使用 JavaScript 動畫。
  • 如果您選擇使用 JavaScript 製作動畫，請使用 Web Animations API 或您熟悉的新型架構。

大部分的基本動畫都可以使用 CSS 或 JavaScript 建立，但所需的時間和努力程度有所不同 (請參閱「CSS 與 JavaScript 的效能比較」)。每種方法各有優缺，但以下是一些實用指南：

  • 如果 UI 元素的狀態較小且獨立，請使用 CSS。CSS 轉場效果和動畫非常適合從側邊顯示導覽選單或顯示工具提示。您可能會使用 JavaScript 來控制狀態，但動畫本身會在 CSS 中。
  • 如需大幅控制動畫，請使用 JavaScript。Web Animations API 是符合標準的方法，目前可在大多數新式瀏覽器中使用。這可提供實際物件，非常適合複雜的以物件為導向的應用程式。如需停止、暫停、放慢或倒轉動畫，JavaScript 也是不錯的選擇。
  • 如要手動協調整個場景，請直接使用 requestAnimationFrame。這是進階的 JavaScript 方法，但如果您要建構遊戲或在 HTML 畫布上繪圖，這項方法就很實用。

或者，如果您已使用含有動畫功能的 JavaScript 架構 (例如透過 jQuery 的 .animate() 方法或 GreenSock 的 TweenMax)，建議您繼續使用這些架構來製作動畫，這樣整體來說會更方便。

使用 CSS 製作動畫

使用 CSS 製作動畫，是讓畫面上元素移動的最簡單方法。這種做法稱為「宣告式」，因為您會指定要發生的動作。

以下是一些 CSS，可在 X 和 Y 軸上移動元素 100px。這項操作是透過使用已設定為採用 500ms 的 CSS 轉場完成。新增 move 類別後，系統會變更 transform 值並開始轉場。

.box {
  transform: translate(0, 0);
  transition: transform 500ms;
}

.box.move {
  transform: translate(100px, 100px);
}

試用

除了轉場時間長度之外，您還可以選擇減速選項，也就是動畫的感受。如要進一步瞭解漸變效果，請參閱「漸變效果的基本概念」指南。

如同上述程式碼片段，如果您建立了個別的 CSS 類別來管理動畫，就可以使用 JavaScript 切換各個動畫的開關：

box.classList.add('move');

這樣一來，應用程式就能取得良好的平衡。您可以專注於使用 JavaScript 管理狀態，只需在目標元素上設定適當的類別，讓瀏覽器處理動畫。採用這種做法，您就能監聽元素上的 transitionend 事件，但前提是您能放棄支援舊版 Internet Explorer；第 10 版是第一個支援這些事件的版本。其他所有瀏覽器已支援這項事件一段時間。

用來監聽轉場結束的 JavaScript 如下所示：

var box = document.querySelector('.box');
box.addEventListener('transitionend', onTransitionEnd, false);

function onTransitionEnd() {
    // Handle the transition finishing.
}

除了使用 CSS 轉場效果，您也可以使用 CSS 動畫，進一步控管個別動畫主要影格、時間長度和迭代次數。

舉例來說，您可以使用相同的轉場效果為方塊製作動畫，但不需任何使用者互動 (例如點選)，且動畫會無限重複。你也可以同時變更多個資源。

.box {
  animation-name: movingBox;

  animation-duration: 1300ms;

  animation-iteration-count: infinite;

  animation-direction: alternate;
}

@keyframes movingBox {
  0% {
    transform: translate(0, 0);
    opacity: 0.3;
  }

  25% {
    opacity: 0.9;
  }

  50% {
    transform: translate(100px, 100px);
    opacity: 0.2;
  }

  100% {
    transform: translate(30px, 30px);
    opacity: 0.8;
  }
}

試用

使用 CSS 動畫時，您可以不必考量目標元素，自行定義動畫，並使用 animation-name 屬性選擇所需的動畫。

如要讓 CSS 動畫在舊版瀏覽器中運作，您必須新增供應商前置字元。許多工具都能協助您建立所需 CSS 的前置字版本，讓您在來源檔案中編寫未加上前置字的版本。

使用 JavaScript 和 Web Animations API 製作動畫

相較於編寫 CSS 轉場效果或動畫，使用 JavaScript 製作動畫的複雜度較高，但通常會提供給開發人員更強大的功能。您可以使用 Web Animations API 為特定 CSS 屬性製作動畫，或建構可組合效果的物件。

JavaScript 動畫是必要的，因為您會將動畫編寫為程式碼的一部分。您也可以將這些物件封裝在其他物件中。以下是您需要編寫的 JavaScript，用於重新建立先前所述的 CSS 轉場效果：

var target = document.querySelector('.box');
var player = target.animate([
    {transform: 'translate(0)'},
    {transform: 'translate(100px, 100px)'}
], 500);
player.addEventListener('finish', function() {
    target.style.transform = 'translate(100px, 100px)';
});

根據預設，Web Animations 只會修改元素的呈現方式。如果您希望物件停留在移動後的位置，請在動畫結束時修改其基礎樣式，如本範例所示。

試用

Web Animations API 是 W3C 推出的相對較新的標準。大多數新式瀏覽器都原生支援這項功能。如果不支援新式瀏覽器，您可以使用 polyfill。

透過 JavaScript 動畫，您可以在每個步驟中完全控制元素的樣式。這表示您可以減慢動畫速度、暫停、停止、反轉動畫，並視需要操作元素。如果您要建構複雜的以物件為導向應用程式，這項功能就特別實用，因為您可以妥善封裝行為。