摘要：方法接受兩個參數關鍵幀和持續時間。第一個參數，關鍵幀，是一個對象數組，每個對象都是動畫中的一個關鍵幀。為我們提供了兩種不同的方式設置緩動在我們的關鍵幀數組或我們的選項對象內。實際上，這些緩動應用在關鍵幀之間，而不是整個動畫。

作者：Ollie Williams
原文：CSS Animations vs Web Animations API

在 JavaScript 有一個原生動畫 API 叫 Web Animations API，在這篇文章中簡稱為 WAAPI。MDN 上已經有 很好的文檔，而且，Dan Wilson 為此寫了 一個很棒的文章系列。

在本文中，我們一起來對比一下 WAAPI 和 CSS 動畫。

盡管瀏覽器原生支持仍然有限，但 WAAPI 有一個全面和強大的 polyfill，使得現在就能在生產環境使用。

同樣地，可以在 Can I Use 查看瀏覽器兼容性數據。然而，這并沒有提供很好的信息來支持 WAAPI 的所有子功能。這里有一個檢查工具：

See the Pen WAAPI Browser Support Test by Dan Wilson (@danwilson) on CodePen.

要想再沒有 polyfill 的情況下體驗所有功能，請使用 Firefox Nightly。

如果你曾經使用 jQuery 的 .animate()，那么應該會覺得 WAAPI 的基本語法看起來很熟悉。

var element = document.querySelector(".animate-me");
element.animate(keyframes, 1000);

animate 方法接受兩個參數：關鍵幀和持續時間。與 jQuery 相比的優勢是，不僅是瀏覽器內置，而且性能也更好。

第一個參數，關鍵幀，是一個對象數組，每個對象都是動畫中的一個關鍵幀。看這個簡單的例子：

var keyframes = [
  { opacity: 0 },
  { opacity: 1 }
];

第二個參數，持續時間，指的是想要動畫持續多久，在上面的例子中是 1000 毫秒。接下來看一個更令人興奮的例子。

這里有一些從 animista 拉取的 CSS 代碼，被稱為 slide-in-blurred-top 的入場動畫。看起來很漂亮

在 實際PERF 比這個 GIF 效果好很多。

以下是 CSS 中的關鍵幀：

0% {
  transform: translateY(-1000px) scaleY(2.5) scaleX(.2);
  transform-origin: 50% 0;
  filter: blur(40px);
  opacity: 0;
}
100% {
  transform: translateY(0) scaleY(1) scaleX(1);
  transform-origin: 50% 50%;
  filter: blur(0);
  opacity: 1;
}

在 WAAPI 中代碼基本相同：

var keyframes = [
  { 
    transform: "translateY(-1000px) scaleY(2.5) scaleX(.2)", 
    transformOrigin: "50% 0",
    filter: "blur(40px)",
    opacity: 0 
  },
  { 
    transform: "translateY(0) scaleY(1) scaleX(1)",
    transformOrigin: "50% 50%",
    filter: "blur(0)",
    opacity: 1 
  }
];

可以看出，將關鍵幀應用到需要動畫的元素上是多么容易：

element.animate(keyframes, 700);

為了簡單起見，只指定了持續時間。但是，我們可以使用這個第二個參數來傳遞更多的選項，至少也應該指定一個緩動效果。以下是所有可用選項的完整列表，其中包含一些示例值：

var options = {
  iterations: Infinity,
  iterationStart: 0,
  delay: 0,
  endDelay: 0,
  direction: "alternate",
  duration: 700,
  fill: "forwards",
  easing: "ease-out",
}
element.animate(keyframes, options);

加上這些選項，我們的動畫將從頭開始，沒有任何延遲，在動畫完成后往返循環播放。

不爽的是，對于熟悉 CSS 動畫的人來說，一些術語跟我們習慣的有所不同。好處是打字會更快一些！

使用 easing 而不是 animation-timing-function

不是 animation-iteration-count，而是 iterations。如果我們希望動畫永遠重復，使用 Infinity 而不是 infinite。有點混亂， Infinity 不帶引號。Infinity 是一個 JavaScript 關鍵字，而其他值都是字符串。

我們使用毫秒而不是秒，對于之前寫過許多 JavaScript 的人來說，這應該是一樣的。（你也可以在 CSS 動畫中使用毫秒數，但很少有人使用。）

我們來仔細看看一個選項：iterationStart。

當我第一次碰到 iterationStart 有點困惑。為什么要從指定的迭代開始，而不是只要減少迭代次數？當使用十進制數時，此選項非常有用。例如，可以將其設置為 .5，動畫將開始一半。要做一個完整的動畫需要兩個一半，所以如果迭代次數設置為 1，并且將 iterationStart 設置為 .5，動畫將從一半到動畫結束播放，然后從動畫開頭開始，結束于中間！

值得注意的是，也可以將迭代次數設置為小于 1。例如：

var option = {
  iterations: .5,
  iterationStart: .5
}

這樣，動畫會從中間開始，一直播放到最后。

endDelay：如果要將多個動畫串在一起，但是希望在一個動畫的結尾和后續動畫的開始之間存在差距，這時 endDelay 就很有用。這是一個有用的視頻，由 Patrick Brosset 來解釋。

一個 YouTube 的視頻

在任何動畫中，緩動都是最重要的元素之一。WAAPI 為我們提供了兩種不同的方式設置緩動 - 在我們的關鍵幀數組或我們的選項對象內。

在 CSS 中，如果使用 animation-timing-function: ease-in-out 你可能會認為動畫會緩慢開始，然后緩慢結束。實際上，這些緩動應用在關鍵幀之間，而不是整個動畫。這可以對動畫的感覺進行細粒度的控制。WAAPI 也提供這種功能。

var keyframes = [
  { opacity: 0, easing: "ease-in" }, 
  { opacity: 0.5, easing: "ease-out" }, 
  { opacity: 1 }
]

值得注意的是，在 CSS 和 WAAPI 中，不應該傳入最后一幀的緩動值，因為這將不起作用。可是很多人會犯這種錯誤。

有時候，在整個動畫中添加緩動效果更為直觀。這在 CSS 是不可能的，但現在可以在 WAAPI 中實現。

var options = {
  duration: 1000,
  easing: "ease-in-out",
}

可以看到這兩種緩動在 CodePen 上的區別：

點我查看

值得注意的是 CSS 動畫和 WAAPI 之間的另一個區別：在 CSS 中 默認值是 ease，而在 WAAPI 默認是 linear。 ease 實際上是 ease-in-out 的一個版本，當你想偷懶時這是一個非常好的選擇。同時，線性代表致命的沉悶和無生命 - 一致的速度看起來機械和不自然。它被選為默認值，可能因為它是最中立的選項。然而，在使用 WAAPI 時，更好是使用緩動，以免動畫看起來很乏味和機械。

WAAPI 提供與 CSS 動畫相同的性能改進，盡管這并不意味著一定就是平滑的動畫。

希望這個 API 的性能優化做到，使我們可以避免使用 will-change和 translateZ?成為可能。但是，至少在目前的瀏覽器實現中，這些屬性在處理性能問題方面仍然是有幫助，有必要的。

但是，如果你的動畫有延遲，則無需擔心使用 will-change。web animations 規范的主要作者對 Animation for Work Slack community 提出了一些有趣的建議，希望他不介意我在這里重復：

如果有一個正向的延遲，不需要使用 will-change，因為瀏覽器將在延遲開始時進行分層，當動畫啟動時，它將準備就緒。

WAAPI 為我們提供了一套已經在 CSS 中實現的 JavaScript 語法。然而，它們不應該被視為對手。如果我們堅持使用 CSS 完成動畫和轉換，那么我們可以在 WAAPI 進行動畫交互。

.animate() 方法不僅處理元素的動畫，它也返回一些東西。

var myAnimation = element.animate(keyframes, options);

在控制臺中查看的動畫對象

如果我們在控制臺中查看返回值，會發現這是一個動畫對象。這為我們提供了各種各樣的功能，其中一些是不言自明，比如 myAnimation.pause()。通過更改 animation-play-state 屬性，我們可以通過 CSS 動畫實現類似的結果，但 WAAPI 語法比 element.style.animationPlayState = "paused" 更簡潔。我們也可以通過 myAnimation.reverse() 輕松反轉動畫，同樣地，跟我們使用腳本更改 CSS 的 animation-direction 屬性相比，稍微有點進步。

然而，到目前為止，使用 JavaScript 操作 @keyframe 并不是件容易的的事。即使是重新啟動動畫這樣簡單的事，也是需要一些技巧的，就像 Chris Coyier 先前寫過的那樣。使用 WAAPI，我們可以簡單地使用 myAnimation.play() ，如果動畫已經完成，將從一開始就重播動畫，或者如果我們暫停播放，則從中間迭代播放動畫。

我們甚至可以輕松地改變動畫的速度。

myAnimation.playbackRate = 2; // speed it up
myAnimation.playbackRate = .4; // use a number less than one to slow it down

這個方法將返回所有動畫對象的數組，包含使用 WAAPI 定義的動畫和 CSS 轉換或動畫。

element.getAnimations() // returns any animations or transitions applied to our element using  CSS or WAAPI

如果你喜歡使用 CSS 來定義和使用動畫，getAnimations() 允許 API?? 與 @keyframes 結合使用。你可以繼續使用 CSS 進行大部分動畫工作，然后在需要 API 時獲得使用 API 的優勢。

即使一個 DOM 元素只使用到一個動畫，getAnimations() 也將始終返回一個數組。我們使用那個單一的動畫對象來處理。

var h2 = document.querySelector("h2");
var myCSSAnimation = h2.getAnimations()[0];

我們也可以在 CSS 動畫中使用 web animation API :)

myCSSAnimation.playbackRate = 4;
myCSSAnimation.reverse();

很多通過 CSS 觸發的事件，現在我們已經可以使用 JavaScript 代碼來完成： ? animationstart，animationend，animationiteration 和 transitionend。之前經常需要監聽動畫或轉換的結束，以便從 DOM 中刪除應用的元素。

在動畫對象可以使用 WAAPI 來完成 animationend 或 transitionend 做的事情：

myAnimation.onfinish = function() {
  element.remove();
}

WAAPI 為我們提供了兩個選擇：event 和 promise。動畫對象的 .finished 方法會返回一個在動畫結束時的 promise。下面這段代碼是上面例子的 promise 版本：

myAnimation.finished.then(() =>
  element.remove())

我們來看看來自 Mozilla 開發者網絡中的一個稍微復雜點的例子。Promise.all 接受一個 promise 的數組，一旦所有 promise 完成才會運行回調函數。可以看出，element.getAnimations() 返回的是一個動畫對象數組。我們可以將數組中的所有動畫對象 map 到每個動畫對象的 .finished上，這樣就獲得需要的 promise 數組。

在這個例子中，只有在頁面上的所有動畫完成后，我們的函數才能運行。

Promise.all(document.getAnimations().map(animation => 
  animation.finished)).then(function() {           
    // do something cool 
  })

本文中提到的功能只是一個開始。從目前的規范和實施來看，未來會有一個很強大動畫 API。