一般來說，網頁動畫常使用 Javascript、CSS、SVG 等方式製作，尤其近期 SVG 動畫有越來越流行的趨勢，這些方法都各有優缺，WAAPI則企圖融合 CSS 的性能（支援硬體加速，但動態調整仍需依靠 Javascript），以及 Javascript 的易於調整，並以原生 API 來達成！
我們先來看一下基本功
基本用法：
element.animate(keyframes, timing);
只有短短一行。
keyframes 和 timing 是 WAAPI 需要的兩個參數，如果熟悉 CSS 動畫的寫法，應該會覺得非常容易：
var keyframes = [{
background: "#fff"
}, {
background: "#f00"
}, {
background: "#ff0"
}, {
background: "#f0f"
}, {
background: "#00f"
}, {
background: "#0ff"
}];
var timing = {
duration: 5000, // animation-duration(ms)
delay: 0, // animation-delay(ms)
iterations: 1, // animation-iteration-count: [number, Infinity...]
direction: 'alternate', // animation-direction: [normal, reverse...]
easing: 'ease-in-out', // animation-timing-function: [linear, ease, ease-in, ease-out...]
fill: 'both' // animation-fill-mode [none,forwards, backwards, both...]
};
keyframes 的寫法就像是 CSS 中的@keyframes，
timing 則是調整持續時間、delay、執行次數……等
了解上面的基礎用法，我們就可以來寫一些簡單的動畫了： 改變背景顏色
See the Pen Web Animations API demo by Rex Tsou (@akccakcctw) on CodePen.
進階用法
如果有仔細看上面的例子，應該會發現，動畫居然還可以做播放、暫停、倒帶等操作！ 要怎麼做呢？
我們延續基本用法，定義一個animate的元素：
var player = document.getElementById('toAnimate').animate()
此時我們的 player 總共會有五種狀態：“pending”、“paused”、“running”、“idle”、“finished”
console.log(player.playState);
// "pending"、"paused"、"running"、"idle"、"finished"
這五種狀態代表的意義如下，
pending：播放或暫停即將發生時paused：暫停running：播放idel：初始finished：結束
除了 pending 之外，我們透過其餘方法可以改變動畫的狀態：
player.pause(); // "paused"
player.play(); // "running"
player.cancel(); // "idle"
player.finish(); // "finished"
還可以透過reverse()倒帶：
player.reverse();
以上算是 WAAPI 的入門介紹，另外附上一份控制元素移動、變形的 demo： 控制元素移動、變形
See the Pen Web Animations API demo 2 by Rex Tsou (@akccakcctw) on CodePen.
比較可惜的是，目前瀏覽器的支援還不夠完整（如下表），但是可先引入一份 polyfill 來彌補，所以也不需要太擔心！
不過還是希望瀏覽器廠商們可以趕快補足WAAPI的支援啦，敲碗~~~~