BLOG
25年新卒 WEBエンジニア インターンシップ 受付中

【コピペでOK】サイトを印象的に!ホバーアニメーションまとめ【デモ・サンプルコード付き】

更新日:2022/05/18

ナビゲーションやボタンは、サイトを閲覧するときに必ず操作する要素ですよね。
ちょっとした要素に素敵なホバーアニメーションがついていると、細部へのこだわりが見えて、サイトの印象もよくなります。

また、ナビやボタンのホバー時のデザインはなく、コーダーにおまかせということもあります。
コーダーにおまかせしたらかっこよくないホバーをつけられてしまった…、
なんて言われないよう、素敵なホバーアニメーションをつけて、お客さまやディレクターさんの期待に応えましょう!

本記事では、イメージ通りのアニメーションを探しやすいように、シンプル・綺麗、ポップ、スタイリッシュ・かっこいい、かわいい・柔らかい といった、イメージ別にホバーアニメーションをご紹介していきます。
デモ・サンプルコード付きですので、ご活用ください。

また、CSSアニメーションをまとめた記事もあります。
ぜひこちらもご覧いただき、サイトをリッチに演出してみてください!
イメージ別!サイトをリッチに見せるためのCSSアニメーションまとめ


サンプルを一覧で見れるデモサイトを用意しましたので、ご覧ください。
デモサイト

ベースのHTML・CSS

以下のHTML・CSSをベースに、ホバーアニメーションをつけていきます。
ボタン用・画像バナー用・テキスト用と分かれています。

また、サンプルコードにはベンダープレフィックスをつけませんので、必要に応じて適宜つけてください。

シンプル・分かりやすい・綺麗

シンプルでスタンダードなホバーアニメーションを集めました。
組み合わせて使うと、より印象的になります。

ボタンの色が反転する

シンプルですが、見た目が大きく変わるため印象的なアニメーションです。

字間が広がる

おとなしい印象の綺麗なホバーアニメーションです。
アニメーションの秒数を長くし、ホバー時の字間を更に広げると、優しいイメージになります。
単体だとささやかなので、他のアニメーションと組み合わせてみるのもよいかと思います

浮き上がる

下に沈んだり、ボックスシャドウで立体感を出すなどの工夫ができます。

ズームイン[バナー]

バナーに囲み(.zoom-box)を追加し、.c-bnr.zoomを拡大させたときに画像がはみ出ないように、overflow: hidden; をかけています。

色が付く+テキスト[バナー]

ホバーで「Read More」が出てくることによって、このボタンをクリックすると詳細が見られる、ということがわかりやすくなります。
「Read More」は疑似要素(::before)で表示させています。

ポップ・勢いがいい

ポップで元気のよい印象のホバーアニメーションを集めました。

押下

ホバーしたときに、少し立体的なボタンが凹んで、よりクリックできそうな雰囲気があります。

スライド

左から背景色が流れてくる、勢いのよいホバーアニメーションです。
ホバー時の「transform-origin」を「right top」に設定することで、ホバーを離したときに背景色が右に帰っていくように設定できます。
他にも右から左、真ん中から、などカスタマイズできます。

スライド 斜め

スライドのマイナーチェンジです(コードを流用しています)。
疑似要素(::after)で作った背景色を斜めに変形させて、左斜め上から背景色が下りてくるようにします。
heightは100%だと高さが足りないため、数値を増やしておきます。

迫る

ホバーで拡大します。
シンプルですが、存在感のある元気な印象のホバー効果です。

スタイリッシュ・かっこいい・スピーディー

スタイリッシュでおしゃれな印象を与えるのにぴったりなホバーアニメーションです。

グラデーションが切り替わる

background-sizeの横幅を予め200%にしておき、ホバー時にbackground-positionを横に100%移動させることで、色がガラッと変えることができます。
グラデーションは色の変化がわかりやすいように、2色ではなく3色で設定するのがおすすめです。

ズレ

色の反転+薄い背景色がずれるアニメーションです。
「.c-btn.slip」にbackground-colorを設定すると重なり順をうまく設定できないため、黄色と薄黄色の背景色は疑似要素(::before、::after)で背景色を付けています。
囲みをひとつ増やす形でも再現できると思います。

縮小[バナー]

画像をホバーすると、縮小します。
transition-durationの値を大きくすると、綺麗な印象になります。