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

Web Animations API とは？

最終更新: 2026年10月8日

💡 ブラウザーのアニメーションをJavaScriptで操作するリモコン

ブラウザーのアニメーションをJavaScriptから作成・制御するAPI。キーフレームと時間を指定し、Animationオブジェクトで再生・一時停止・逆再生などを操作できる。

📌 このページのポイント

opacityを変える例。作成したアニメーションを戻り値のAnimationで制御する。

ひよこ

CSSアニメーションがあるのに、なぜ使うの？

ペンギン先生

再生状態や速度などをJavaScriptで制御したいときに便利だからだよ。CSSで定義したアニメーションも、取得して制御できるんだ

ひよこ

element.animate()はどう使うの？

ペンギン先生

element.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 500 })なら、500ミリ秒で透明から不透明へ変えるアニメーションを作って再生するよ

ひよこ

一時停止できる？

ペンギン先生

戻ってきたAnimationオブジェクトのpause()で一時停止し、play()で再開できるよ。reverse()で再生方向を変えることもできるんだ

ひよこ

使えば必ず高速になるの？

ペンギン先生

ブラウザーが処理を最適化できるけれど、速さの保証ではないよ。transformやopacityと、レイアウトや描画を伴うプロパティでは負荷が違う。実際の画面で確認しよう

ひよこ

既存の動きを取り出せる？

ペンギン先生

element.getAnimations()で、その要素に適用されるアニメーションを取得できるよ。制御や完了待ちを組み合わせられるので、ユーザー操作に応じて動きを変えるときに役立つんだ

もっと詳しく知りたい人へ

アニメーションが終わるのを待てる？

Animation.finishedは完了時に解決するPromiseだよ。キャンセル時には拒否されるため、キャンセルも起こる処理ではその扱いを決めておこう。

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

「Web Animations API」って出てきたら「ブラウザーのアニメーションをJavaScriptで作成・制御するAPI」と思えばだいたいOK！

📖 おまけ：英語の意味

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

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