素のJavaScriptだけでアニメーションを実装するWeb Animations API

素のJavaScriptだけでアニメーションを実装するWeb Animations APIWeb Animations APIとは、他のライブラリーを使わずにアニメーションを実装できるJavaScriptの仕様です。CSSアニメーションと違い、様々な関数やイベントと組み合わせてより柔軟に、より豊かな表現が可能となります。今回はそんなWeb Animations APIを使ってみましょう！ Web Animations API の基本の書き方基本的な考え方や構造はCSS アニメーションと同じですが、アニメーションの内容やどう動かすかの指定は、配列やオブジェクトで記述していきます。基本形はこんな感じ： JavaScript 動かす要素.animate(動かす内容, 動きの詳細); 動かす内容（キーフレーム）animate() の第一引数には動かす内容、キーフレームを指定します。CSS と同じ形

[yasu-log]

とてもわかりやすい記事。ちなみに、Web Animations APIは便利なのですが、DOMに生えたAPIなので、WebGLやCanvasで利用できないのが注意点です。

[ustam]

JSにCSSを埋め込むこと自体が見通し悪そう。初期値をCSSに書くなら、どのみちJSだけでは完結しないし。

[mr_mayama]

JSは動的にしたいユーザー操作等をCSSの変数に渡すっていう切り分けの方がいいと思うんだよな。とはいえJSで完結すると「アニメーションを作るツール」の開発はしやすくなると思う。

[skunk0915]

js

[uva]

そんなん生えてたんや

[Syunpei]

この記事をおすすめしました:

[yarumato]

“Web Animations APIのいいところはJavaScriptのみで完結できるところ。CSSとJavaScriptのファイルを行き来する必要がなくなる　animate() easing duration iterations”

[m50747]

素のJavaScriptと呼ばずVanillaJSを呼ぼう。 最初知った時は便利な使い方だと感心した。

[mayumayu_nimolove]

GSAPから乗り換えるメリットがあるかな