制作の手助けに。手軽に使えるcssアニメーションライブラリ

マークアップ Webデザイン

2019.01.11(Fri)

こんにちは。マークアップエンジニアの近藤です。
最近、「サイトに動きをつけて欲しい」という要望が多くなったように思います。
ただ、そうは言われても、実装して欲しい動きを口頭で説明するのも難しいですよね。
今回は、「サイト上で動きが確認できて」手軽にアニメーションが実装できるライブラリのご紹介です。

Animate.css、Vivify

2つとも、色々なアニメーションが使えるライブラリ。
読み込んでカスタマイズすることで表現の幅が広がりそうです。

Animate.css Vivify

Hover.css

その名の通り、hover時のアニメーションに特化したライブラリです。
ボタンなどに動きをつける際に重宝しそうです。

Hover.css

Magic Animations

ちょっと変わった動きがつけられるライブラリ。
デモの一覧が見やすいので、動きの比較がしやすいと思います。

Magic Animations

まとめ

使う、使わないに関わらず、ご紹介したようなデモサイトは見ているだけでも楽しいですよね。
そして実装に関わる方だけでなく、デザイナーの方にも参考になると思います。
今までエンジニアに伝えるのに苦労したこともあると思いますが、こういうサイトを利用してみてはいかがでしょうか?