鹿児島のWebデザイナー小田聖夏のリアルブログ｜失敗、悩み、裏話

簡単にアニメーション

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.

コメント