素の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と同じ形でプロ
Web Animations APIを使った波紋アニメーション(ripple effect) - Qiita
CSSアニメーションを調べていたらWeb Animations APIというJavaScriptで同じことができることがわかったので、勉強も兼ねて簡単なライブラリを作ってみました。この記事はその時得た知識のまとめです。 Web Animations APIについて CSSのAnimationsとTransitionsをJavaScriptで実現できるAPIです。 現在は、ChromeとFirefoxで実装が進められています。 Safari(WebKit)とEdgeについてはTodoには入ってますが、まだ実装されていません。 web-animations-jsというpolyfillがあるので、そちらを使うとSafariやEdgeでも使えます。 成果物 今回作成したライブラリはパルス（波紋）のアニメーションです。 CSSアニメーションでも簡単に実装できます。これをJavaScriptでやります
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
