この記事では、ナビゲーションメニューやテキストリンクを魅力的にするCSSホバーアニメーションをまとめています。
どれもHTMLスニペットとして公開されているので、CSSコードをコピー、貼り付けるだけで利用できる点もポイントです。
コピペ可能！ナビメニューやリンクの参考にしたいCSSホバーアニメーションまとめ
100 underline/overlay animations | The ultimate CSS collection 🥇
今回特にオススメしたいリンク用ホバーアニメーション集で、基本的なものから3Dなどユニークなエフェクトまで100種類が揃います。
SVGやJS，疑似要素、@keyframeなどは使われておらず、クラス名を追加するだけでスタイリングできます。
基本となるベーシックタイプ7種類。
See the Pen
The basic by Temani Afif (@t_afif)
on CodePen.
二重ラインを活用したCSSホバーエフェクトも8種類。
See the Pen
The double by Temani Afif (@t_afif)
on CodePen.
ドットを活用したユニークRoundedエフェクトも8種類。
See the Pen
The rounded by Temani Afif (@t_afif)
on CodePen.
テキストリンクやボタンをCSSでスタイリングしたスニペット27個画揃ったアニメーションライブラリ。クリックするとCSSソースコードをコピーできるのも使いやすいですよ。
アンダーライン下線を利用したリンクホバーエフェクト、シンプルで効果的なアニメーション。
See the Pen
Text underline hover effects by Misha Heesakkers (@MishaHahaha)
on CodePen.
CSSだけで表現できるユニークなホバーリンクエフェクト。波型ウェーブやジグザグなど、デザインのアクセントにも。
See the Pen
Animated SVG Links by Adam Kuhn (@cobra_winfrey)
on CodePen.
CSS mouse-out transition effect
左から右にラインが流れるようなアニメーションが特長的なCSSホバーエフェクト。
See the Pen
CSS mouse-out transition effect by Adam Argyle (@argyleink)
on CodePen.
Simple CSS Line Hover Animations for Links
ウェブサイトのデザインを強調し、控えめなマイクロインタラクションを追加するのに最適なラインアニメーション集。JavaSscriptなどは活用せずに、CSSのみでスタイリングされています。ソースファイルも無料ダウンロード可能です。
Morphing Gooey Text Hover Effect
SVGフィルタを活用したネバネバとしたGooeyエフェクトで、３つのエフェクトが無料のソースコードと一緒に公開されています。
Distorted Link Effects with SVG Filters
こちらもSVGフィルタを利用したリンクホバーエフェクト用ライブラリで、直線や円サークル、四角形などのシンプルなシェイプに歪みを加えるDistortionエフェクトを組み合わせています。
リンクにマウスカーソルを重ねると、文字テキストが左から右へとサムネイル付きでアニメーションするCSSエフェクト。
Creating a Menu Image Animation on Hover
各リンクを選択するたびに画像が表示されるホバーエフェクトのチュートリアル。こちらはGSAPプラグインを導入していますが、最近よく見かけるエフェクトのひとつ。
Exploring Animations for Menu Hover Effects
上記チュートリアルをよりクリエイティブに仕上げたメニューホバーエフェクト集で、CSSアニメーションの可能性を感じる作品となっています。
リンクをホバーすると、くるりと円を描くホバーエフェクトはSVGを利用した小技テクニック。
See the Pen
Link hover animation by Aaron Iker (@aaroniker)
on CodePen.
文字テキストリンクのホバーエフェクトにグラデーションを利用したCSSアニメーション。
See the Pen
Gradient text on hover by Mike Young (@miketricking)
on CodePen.
アンダーライン下線と背景を利用した、シンプルで使いやすいCSSホバーエフェクト8種類。
See the Pen
SCSS link hover animations by Jens Lettkemann (@jltk)
on CodePen.
今後もCSSホバーアニメーションも随時アップデート予定となっています。
Webデザイン制作の面倒な作業をラクにする、便利なCSS便利ツールも活用してみてはいかがでしょう。
