簡単にアニメーション

2023-02-15

Web Animation API

ちょっとした動きであれば、animation.cssが簡単だけれど、
それよりも、もう少し大きな動きをつけたいときは、
「Web Animation API」を使えば、外部ファイルの読み込みの必要もなく、簡単なjavascriptでアニメーションの設定が出来るので、応用すれば色々できそう。

変化前と、変化後の記述のみで動くので簡単

See the Pen
animation api
by odamiyuki (@aotyan)
on CodePen.

表示・非表示

クリックされた時に、javascriptでクラスが追加・削除されることでアニメーションする。
とてもシンプルなコードでいいので、導入しやすい。

クリックで文字が表示・非表示

See the Pen
クリックで表示・非表示
by odamiyuki (@aotyan)
on CodePen.

ブラウザ読み込みで表示

See the Pen
ブラウザ読み込みで表示
by odamiyuki (@aotyan)
on CodePen.

色の変化

keyframe

CSSアニメーションだけで設定

See the Pen
keyframe
by odamiyuki (@aotyan)
on CodePen.

Web Animations API

javascript使用

See the Pen
Web Animations API
by odamiyuki (@aotyan)
on CodePen.

スクロールでヘッダーに色をつけて固定

See the Pen
スクロールでヘッダーに色がつく
by odamiyuki (@aotyan)
on CodePen.

PAGE TOP