スグに使えるjs・css アニメーションレシピ。

今日で会社のブログを書くのも最後になります。こんにちは。

今回は簡単に導入できるホバーやクリック時のアニメーションを紹介します。
ユーザビリティ向上の為も導入してみてはいかがでしょうか。
※PC閲覧前提で全て処理しています。

テキスト系アニメーション

一般的なホバー処理

See the Pen text-color-Normal by NP-murano (@NP-murano) on CodePen.

・イージング

See the Pen text-color-ease by NP-murano (@NP-murano) on CodePen.

・拡大

See the Pen text-color-scale-big by NP-murano (@NP-murano) on CodePen.

・縮小

See the Pen text-color-scale-small by NP-murano (@NP-murano) on CodePen.

・他のメニューを動かす

ここからjsも使用します。

See the Pen text-color-other-change by NP-murano (@NP-murano) on CodePen.

・一文字ずつ動かかす

See the Pen text-color-string-move by NP-murano (@NP-murano) on CodePen.

ボーダー系アニメーション

いかがだったでしょうか？
~~めんどくさかったので~~、transitionの設定等は今回一定でしたが、
この辺りを調整するだけでもだいぶ雰囲気が変わります。
cssのみでも結構いい感じのアニメーションが実現できます。
jsも駆使するとさらに複雑な動きが出来るようなり楽しいですね。
サイトに合ったアニメーションがあれば参考にしていただければ幸いです。