ホバーアニメーション css コピペ集 — 11の実装例
マウスを乗せた瞬間の反応＝ホバーアニメーションは、「これはクリックできる」を直感的に伝える最重要のUIフィードバックです。Motion LabのHOVER/BUTTONカテゴリから、コピペしやすい11種類を「対象別」に整理して紹介します。
リンク・テキストのホバー
下線が左から右に伸びる、枠線が浮かび上がる――テキストリンクに上品な演出をつけるパターンです。CSSのみで実装できます。
ボタンのホバー・クリック
光が走る、水面のように揺れる、矢印がスライドする、クリック位置から波紋が広がる――CTAボタンの定番演出です。
実装デモ：Liquid Button、Shine Sweep、Arrow Slide Button、Ripple Effect
画像・カードのホバー
画像がじわっと拡大する、マウス位置に応じてスポットライトが当たる、カードが3Dで傾く――商品紹介・ポートフォリオで目を引く演出です。
実装デモ：Image Zoom Mask（CSSのみ）、Spotlight Hover（CSS+JS）、Tilt 3D Hover（CSS+JS）
マウス追従が必要なケース（JS併用）
ボタンがマウスに引き寄せられる「マグネティック」演出や、バネ物理でぬるっと弾むホバーは、マウス座標の取得が必須のためJavaScriptを併用します。
FAQ
モバイルでもホバーは動きますか？
タッチデバイスにはホバーの概念がないため、多くの演出は発動しません。
@media (hover: hover) でPC限定にするか、:active（タップ中）で代替します。CSSのみとCSS+JSの違いは何ですか？
状態の切り替え（
:hover）だけで完結するものはCSSのみ、マウス座標を継続的に取得して要素を動かすもの（マグネット・スポットライト等）はJSが必要です。ホバー効果のtransition時間の目安は？
200〜400msが最適です。これ以下だと認識できず、これ以上だとレスポンスの遅延を感じさせます。
1ページに何個までホバー演出を入れていいですか？
主要なCTA・カードに絞り、1画面2〜4箇所程度が目安です。動きが多すぎるとノイズになります。
関連書籍
PR · Amazon
CSSアニメーション + 高度なテクニック
CSS animation を体系的に学べる定番書。実例多数。
PR · Amazon
Web Designer 必須テクニック
プロのWeb制作で使えるUI/UXとアニメーション解説。
PR · Amazon
Microinteractions（マイクロインタラクション設計）
Dan Saffer著・マイクロインタラクション設計の定番書。
学びを止めない · Amazonサブスク
PR · Amazon
Kindle Unlimited
技術書・デザイン書が読み放題。30日無料体験 →
PR · Amazon
Audible
移動中に耳で学ぶオーディオブック。30日無料体験 →
PR · Amazon
Amazon Prime
Prime Reading・配送特典つき。30日無料体験 →
PR · Amazon
Music Unlimited
作業用BGMに。1億曲が聴き放題・30日無料体験 →
※ Amazonアソシエイト・プログラム参加。リンク経由のご購入で運営者が紹介料を受け取る場合があります。