Web Animations APIとは何ですか？

CSSアニメーションやCSSトランジションと同等のアニメーションをJavaScriptから動的に制御できるブラウザAPI。再生・一時停止・逆再生・速度変更などをプログラムで操作できる。

Web Animations APIのポイントは？

CSSアニメーションと同じブラウザエンジンで動作するJavaScript APIでパフォーマンスが高い。element.animate()で簡単にアニメーションを作成し、play/pause/reverseなどで動的に制御できる。CSSでは難しい条件分岐やユーザー操作に応じたインタラクティブなアニメーションが実現可能

【ウェブアニメーションズエーピーアイ】

Web Animations API とは？

💡 CSSアニメーションをJavaScriptで自在に操る、アニメーション制御のリモコン

📌 このページのポイント

CSSアニメーションと同じブラウザエンジンで動作するJavaScript APIでパフォーマンスが高い
element.animate()で簡単にアニメーションを作成し、play/pause/reverseなどで動的に制御できる
CSSでは難しい条件分岐やユーザー操作に応じたインタラクティブなアニメーションが実現可能

Web Animations APIのイメージ

ひよこ

CSSアニメーションがあるのに、わざわざJavaScriptでアニメーションを作る必要あるの？

ペンギン先生

CSSアニメーションは宣言的で簡単だけど、「ユーザーのドラッグに追従する」とか「途中で一時停止して逆再生する」みたいな動的な制御は苦手なんだ。Web Animations APIならそういったインタラクティブな制御がJavaScriptで簡単にできるよ

ひよこ

element.animate()ってどう使うの？

ペンギン先生

element.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 500 })のように、キーフレームとオプションを渡すだけだよ。戻り値のAnimationオブジェクトでplay()、pause()、reverse()、finish()などが呼べるんだ

ひよこ

jQueryのanimate()やGSAPとはどう違うの？

ペンギン先生

jQueryやGSAPはJavaScriptでスタイルを毎フレーム書き換えるけど、Web Animations APIはブラウザのアニメーションエンジンに処理を任せるからパフォーマンスが段違いなんだ。CSSアニメーションと同じくコンポジタースレッドで動作するから、メインスレッドが重くてもなめらかに動くよ

ひよこ

CSSアニメーションとの使い分けはどうすればいい？

ペンギン先生

単純なホバーエフェクトやローディングアニメーションはCSSで十分。ユーザー操作に応じた動的な制御、複数アニメーションの同期、完了を待ってから次の処理を実行するといったケースではWeb Animations APIが向いているよ。getAnimations()で要素にかかっているアニメーションを取得・制御できるのも便利だね

まとめ：ざっくりこれだけ覚えればOK！

「Web Animations API」って出てきたら「JavaScriptでCSSアニメーションを動的に操れるAPI」と思えればだいたいOK！

📖 おまけ：英語の意味

「Web Animations API」＝ Webアニメーション API

💬 CSSアニメーション・CSSトランジション・JavaScriptアニメーションを統一的に扱える基盤APIとして設計されたものだよ

← 用語集にもどる