みなさん、こんにちは!
日々CSSで悩まされているWebエンジニアです。私はどちらかというとサーバーサイドよりのエンジニアなので、フロントのコーディング作業で悩むシーンというのが多いです。
今回は私と同じ様な思い、また新たなCSSアニメーションのテクニックをお探しの方に向けておしゃれかつ個性的なCSSアニメーションのサンプルを紹介します!
この記事の目次
CSSアニメーションサンプル集
基本的にはCodePenからの引用となっています。
私目線で恐縮ではありますが、楽しんで見ていって下さい!
すぐ使えるボタンホバーアニメーション:12 fancy buttons
0
よく見るホバーCSSアニメーションをすぐに実装したい方におすすめです。
10,11,12番のアニメーションは個性的で他サイトと差をつけられるかも?
タイピングアニメーションをCSSのみで実現:Auto Type! (Pure CSS)
0
タイピングアニメーションといえばまず思いつくのがjsですが、こちらはとても少ない行数のCSSで実現しています!
メインビジュアルの文字で使えそうですね。
ページ内リンクのリッチな形:CSS Site Scroll Micro Animation
0
メインビジュアルが画面いっぱいの時によく使われる、ページスクロールを促すボタン。
画像やWebフォントを使わずにCSSのみで実装してみてはいかがでしょうか?
ありきたりなチェックボックスとおさらば:Toggle switch – only CSS, accessible & semantic
0
チェックボックスをiPhoneのようなボタンアニメーションに変えるCSSです。
スマホUIの改善に是非使用してみて下さい。
CTAのクリック率をCSSアニメーションで上げる:App download button concept
0
こちらのボタンアニメーションはホバー時に文字が変わります。
押しやすくクリック率も上がりそうな気が……
CSSのみでカッコいいドロワーメニューを:CSS3 Only Menu
0
一見普通のドロワーメニューに見えますが、ハンバーガーボタンのアニメーションが逸脱です。
こんなところにもこだわりを持つことが良いです。
マテリアルなタブ切り替え:Material Design Tabs Only CSS
0
タブ切り替えがあるようなUIでは、切り替えるタイミングでのアニメーションを挟むのはとても面倒です。
このCSSさえあればマテリアル風のアニメーションで切り替え可能です!
メニューの新しいカタチ:Pure CSS Circle Menu
0
ドロワーメニュー・トグルメニューなどに飽きた方にはかなりおすすめ。
おしゃれかつ実用性の高さを兼ね備えた新しいメニューだと思います。(テキストを置きにくいのは少し難点かも…)
待ち時間を退屈させない親切さ:Pure CSS Loaders kit
0
ローディングアイコンをアニメーションさせることで、ユーザーに不快感を与えない。その心遣いをリッチに仕上げる際に活躍すること間違いなし!
Webデザインのトレンド「グラデーション」:Animated Gradient Ghost Button Concept
0
最近流行りのグラデーションをCSSのみでアニメーションさせたものです。
こういったアニメーションはどんな場面でも活躍してくれそうなので、今後頻繁に使う機会が増えそう。
CSSアニメーションでリッチなサイトに
いかがでしょうか?
お気に入りのCSSアニメーションは見つかりましたか?こういったアニメーションを積極的に使ってあなたのWebサイトをおしゃれかつリッチに仕上げてみて下さい!
また矢印アイコンをHTML/CSSで作成するためのスニペットをまとめましたので、気になる方は下記からどうぞ!
では、また会う日まで!