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 製作動畫

使用 JavaScript 建立動畫時，相對來說，比編寫 CSS 轉場效果或動畫更複雜，但通常可以大幅提高開發人員的執行能力。您可以使用 Web Animations API 為特定 CSS 屬性製作動畫，或建構可組合效果的物件。

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

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 動畫，您可以在每個步驟中完全控制元素的樣式。換句話說，你可以放慢動畫、暫停播放動畫、停止播放動畫，以及視需要操控元素。這在您建構複雜的物件導向應用程式時特別實用，因為您可正確封裝行為。