Loading

プレオ日誌

blog

cssアニメーション参考サイト

cssアニメーション参考サイト

こんにちは、フロントエンドエンジニアの岡田です。

サイトで見かけるアニメーション。
マウスカーソルを乗せるとアイコンが揺れたり、ページを表示する際にふわっと表示されたり、注目して見てみると結構色んな箇所にアニメーションがついています。

実装する場合も、jQueryやcss、svgなど様々な実装方法があります。
今回はその中でも手軽に実装できるcssアニメーションについて、参考になるサイトをまとめてみました。

Hover.css

Hover.css

Hover.css

class名を記述するだけで様々なマウスホバーエフェクトを使用できます。
また、サイトでは実際の動きを確認することができます。
デザイナーと動きのイメージを共有する際にも便利ですね。

Animate.css

Animate.css

Animate.css

こちらもclass名を記述するだけで様々なマウスホバーエフェクトを使用できます。
サイトで実際の動きを確認することができます。
AniJSと併用することで、クリック、マウスオーバー、スクロール時などのイベントを簡単に実装できます。

ここまで動かせる!楽しいcss アニメーションのサンプル集 | コムテブログ

コムテブログ

ここまで動かせる!楽しいcss アニメーションのサンプル集 | コムテブログ

デモ、コードが一緒に紹介されているので、どのように動かしているのかより分かりやすく確認することができます。

CSSアニメーションの初歩をおさらい|WEB Drawer

WEB Drawer

CSSアニメーションの初歩をおさらい|WEB Drawer

cssアニメーションについて細かく説明がされているのでおさらいしたい方だけでなくcssアニメーション初心者の方も勉強できます。

Single Element CSS Spinners

Single Element CSS Spinners

Single Element CSS Spinners

cssで実装されているローディングアニメーションです。
シンプルなものが多いです。
<View Source>からコードを確認することができます。

いかがでしたでしょうか?

アニメーションなんて難しそうで実装なんてとても…とかまえてしまいそうですが、ある程度のものであればcssだけでも色んなアニメーションを実装することができます。
上記のサイトを参考にオリジナルで作成してみると面白いアイディアが出てくるかもしれません!

ご質問などお気軽にお問い合わせください

お電話でのお問い合わせ

096-312-3430

月〜金曜日(祝日除く) 9:00〜18:00

メールでのお問い合わせ

お問い合わせフォーム >

デザイン相談会
デザイン相談会を行っています。毎週月曜開催・予約制

これから開業する方はもちろん、事業主の方も大歓迎です。デザインやWEBサイト、ブランディングなどについて今現在お困りのことがあればお気軽にご相談ください。プレオデザインでお役に立てることがあれば嬉しいです。

相談会に申し込む >

TOPへ戻る