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 API 是 W3C 相對的新標準，大多數新世代瀏覽器都具備這項原生功能。如果是不支援新式瀏覽器，則可使用 polyfill。

有了 JavaScript 動畫，每個步驟的元素樣式都能由您全權決定。換句話說，你可以放慢動畫、暫停播放動畫、停止播放動畫，以及視需要操控元素。這在您建構複雜的物件導向應用程式時特別實用，因為您可正確封裝行為。