制作の手助けに。手軽に使えるcssアニメーションライブラリ
- Webデザイン
- マークアップ
こんにちは。マークアップエンジニアの近藤です。
最近、「サイトに動きをつけて欲しい」という要望が多くなったように思います。
ただ、そうは言われても、実装して欲しい動きを口頭で説明するのも難しいですよね。
今回は、「サイト上で動きが確認できて」手軽にアニメーションが実装できるライブラリのご紹介です。
Animate.css、Vivify
2つとも、色々なアニメーションが使えるライブラリ。
読み込んでカスタマイズすることで表現の幅が広がりそうです。
Hover.css
その名の通り、hover時のアニメーションに特化したライブラリです。
ボタンなどに動きをつける際に重宝しそうです。
Magic Animations
ちょっと変わった動きがつけられるライブラリ。
デモの一覧が見やすいので、動きの比較がしやすいと思います。
まとめ
使う、使わないに関わらず、ご紹介したようなデモサイトは見ているだけでも楽しいですよね。
そして実装に関わる方だけでなく、デザイナーの方にも参考になると思います。
今までエンジニアに伝えるのに苦労したこともあると思いますが、こういうサイトを利用してみてはいかがでしょうか？