ホバーアニメーションとは【意味/読み/英語表記】（ほばーあにめーしょん/Hover Animation）

ホバーアニメーションの概要

ホバーアニメーションとは、webサイト上において、ボタンやリンク、画像などにマウスのカーソルを合わせたときに、クリックする前に自動的に始まるアニメーションです。

ホバーアニメーションの詳細

ホバーアニメーションの代わりに、「マウスオーバー」「マウスホバー」と言われることもあります。またアニメーションのついたボタンのことは「ホバーボタン」と呼びます。ユーザーがカーソルを合わせたときに、そこがクリックできる場所であること、リンクが埋め込まれていることを気づかせる目的で、ホバーアニメーションは使用されます。

■ ホバーとは
「hover（ホバー）」は日本語で「空中に停止する」という意味です。マウスのカーソルが合った状態において、セレクタの特定の状態に限定してCSS（Cascading Style Sheets、カスケーディング・スタイル・シート）を適用する擬似クラスです。擬似クラスは、HTML要素に対して「単にcssを適用」するのではなく、「特定の状態を指定して適用」します。
hoverはその擬似クラス中のひとつで、マウスカーソルが要素の上に乗っている、という状態を指定して、cssを適用します。

■ ホバーアニメーションのCSSプロパティ例
・opacity：文字や画像が透ける
・box-shadow：ボタンなどに影をつける
・border-radius：画像の角を丸めたり、完全な円にする
・transform：要素を拡大・縮小させたり、移動や回転できる

ホバーアニメーションの関連項目

・UI/UX
・UXデザイナー
・アプリデザイン
・マイクロインタラクション
・人間中心設計