Webサイトにアニメーションを追加する方法はいくつかありますが、その中でも Web Animations API (WAAPI) は強力な選択肢の一つです。
CSSアニメーションや 「requestAnimationFrame」 に比べ、JavaScriptで簡単にアニメーションを制御できるのが特徴です。
Web Animations APIとは？
Web Animations API は、JavaScriptで要素のアニメーションを制御できるAPIです。
CSSアニメーションのように「@keyframes」を使わずに、プログラム的にアニメーションを作成・操作できます。
基本的な使い方
Web Animations API は、以下のようにコードを書いてアニメーションを実行します。
動かす要素.animate(動かす内容,再生時間);＜例＞
const box = document.querySelector(".box");
box.animate(
[
{ transform: "translateX(0px)" },
{ transform: "translateX(100px)" }
],
{
duration: 1000, // 1秒
iterations: Infinity, // 無限ループ
easing: "ease-in-out" // イージング
}
);＜注意点とコードの説明＞
querySelectorAll は 複数の要素を取得する ため、そのまま「box.animate() 」を呼び出すとエラーになります。
.boxクラスを持つ要素が、初期位置（translateX(0px)）から開始する- 1秒かけて
translateX(100px)まで移動する ease-in-outのイージングを適用（動きが滑らかになる）iterations: Infinityにより、アニメーションが無限に繰り返される
Web Animations API の特徴と利点
- JavaScriptで完全に制御可能
- 途中でアニメーションを停止・再開できる
- CSSアニメーションよりも高性能な場合がある
「requestAnimationFrame」よりも簡単
例えば、アニメーションの途中で停止する場合は以下のように書けます。
const animation = box.animate([～～～], {～～～});
// 2秒後にアニメーションを停止
setTimeout(() => {
animation.pause();
}, 2000); //2000ミリ秒CSSアニメーションとの違い
| 項目 | Web Animations API | CSSアニメーション |
| 記述方法 | JavaScript | CSS (@keyframes) |
| 動的な制御 | 可能 | 不可（制限あり） |
| パフォーマンス | 高い（最適化される) | 高い（ブラウザ最適化） |
| 再生・停止・逆再生 | 可能 | 不可（手動で調整必要） |
まとめ
Web Animations API は、CSSアニメーションでは難しい 動的な制御 が可能です。特に、途中停止・再開・逆再生が必要な場面 では、CSSよりも柔軟に対応できます。
アニメーションを細かくコントロールしたい場合は、ぜひWeb Animations APIを試してみてください！
コメント