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

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

[yasu-log]

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

[spark7]

jQueryやん...「動かす要素.animate(動かす内容, 動きの詳細);」

[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”

[kns_1234]

中小企業サイトなどでちょっとしたアニメーションのためにjQuery使っている場合は、これで脱jQueryできるのかな…？

[m50747]

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

[mayumayu_nimolove]

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