用語集 › 🕸️ Web › Web Animations API
【ウェブアニメーションズエーピーアイ】

Web Animations API とは？

💡 CSS × JSの「いいとこどり」で動きをつける仕組み
📌 このページのポイント
Web Animations API の仕組み JavaScript element.animate( [{opacity:0},{opacity:1}], {duration: 300} ) ブラウザ アニメーションエンジン キーフレーム補間 GPU合成（Compositor） タイミング管理 Animation オブジェクト（戻り値） play() pause() reverse() playbackRate finished✓ animation.finished → Promise（完了検知） CSSアニメーションと同じエンジンを JS から直接操作できる
Web Animations API：JSからブラウザのアニメーションエンジンを制御するイメージ
ひよこ ひよこ

CSSアニメーションで十分じゃないの？

ペンギン先生 ペンギン先生

CSSだけだと「ボタンを押したら特定フレームから再生」「途中で一時停止して逆再生」みたいな動的な制御が難しいんだよ。Web Animations APIを使えばplay()・pause()・reverse()・playbackRate変更をJSから自在に操れる

ひよこ ひよこ

どうやって使うの？

ペンギン先生 ペンギン先生

element.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 300, easing: 'ease-in' }) という感じで、要素に対してanimate()を呼ぶだけ。第1引数がキーフレーム配列、第2引数がタイミングオプションで、戻り値はAnimationオブジェクトだよ

ひよこ ひよこ

Animationオブジェクトで何ができるの？

ペンギン先生 ペンギン先生

再生制御だけじゃなく、animation.finished という Promiseが取れる。これでアニメーション完了後にDOMを削除したり次の処理を続けたりできる。CSSだけだとanimationendイベントを自分でリッスンする必要があって地味に面倒だったんだよ

ひよこ ひよこ

GSAPとかjQueryのアニメーションと何が違うの？

ペンギン先生 ペンギン先生

GSAPやjQueryはJSライブラリでブラウザのCompositorスレッド外でアニメーションを計算する。Web Animations APIはブラウザのネイティブアニメーションエンジンに直接アクセスするから、CSS transformやopacityをGPU合成で動かせてパフォーマンスが高い。外部ライブラリ不要なのも強みだよ

ひよこ ひよこ

getAnimations()って何？

ペンギン先生 ペンギン先生

element.getAnimations()で、その要素に現在かかっているアニメーション（CSSアニメーション含む）を全部取得できる。CSS側のアニメーションをJSで一括停止したいときや、アニメーションが終わるまで待ちたいときに使う。Promise.all(element.getAnimations().map(a => a.finished)) で全アニメーション完了を待てるよ

ペンギン
まとめ：ざっくりこれだけ覚えればOK！
「Web Animations API」って出てきたら「JSでアニメーションを細かく制御できるブラウザ標準API」と思えればだいたいOK！
📖 おまけ：英語の意味
「Web Animations API」 ＝ Webアニメーション API
💬 Web（Web標準の）Animations（アニメーション）API（インターフェース）。ブラウザのアニメーションエンジンに直接アクセスできる仕組みだよ
🔗 あわせて読みたい
← 用語集にもどる