【初心者向け】ホバーアニメーションの基本と書き方｜よく使う6つのCSSパターンを紹介！

2025-07-30

記事内にプロモーションを含む場合があります。

【初心者向け】ホバーアニメーションの基本と書き方｜よく使う6つのCSSパターンを紹介！

Webサイトを見ていて、
「ボタンにマウスを乗せるとふわっと拡大したり、色が変わったりする」演出を見かけたことはありませんか？

それは“ホバーアニメーション”と呼ばれるもので、
CSSというスタイルを設定するコードだけで、誰でも簡単に取り入れることができます。

今回は、CSS初心者さんでも理解しやすいようにホバーアニメーションの基本的な仕組みと書き方に加えて、
よく使われるアニメーションの種類についてわかりやすくまとめました。

ワンクリックで目的地へGO！

ホバーアニメーションってなに？

「ホバー（hover）」とは、マウスカーソルを要素の上に乗せた状態を意味します。
Webサイトでは、ボタンやリンク、画像の上にカーソルを乗せたときに、何らかの視覚的な変化を起こすことでユーザーの目を引き、操作を促すことができます。

この“ホバー時の変化”を、CSSを使ってアニメーションのように演出したものが、ホバーアニメーションです。

たとえば次のような効果がよく使われています：

ボタンがふわっと大きくなる
テキストリンクに下線がスッと現れる
画像がズームインする

ちょっとした演出ですが、サイトのデザイン性がぐっと高まり、ユーザーにとっても「わかりやすい操作感」を生み出してくれる便利な技術です。

ホバーアニメーションの基本構文と書き方

ホバーアニメーションを作るときの基本的な考え方は、
「通常の状態」と「ホバーしたときの状態」をそれぞれCSSで指定して、
transition を使って“変化をなめらかに見せる”という流れになります。

以下のようなシンプルなコードで、基本のアニメーションは実現できます。

.selector {
  transition: プロパティ 時間 イージング;
}
.selector:hover {
  プロパティ: 値;
}

サンプルコード（例：ボタンが拡大）

.button {
  transition: transform 0.3s ease;
}

.button:hover {
  transform: scale(1.1);
}

このコードのポイント

transition は「変化させたいプロパティ（今回は transform）」に対して、
どれくらいの時間（0.3秒）・どんな動き（ease）で変化させるかを指定します。
:hover は「マウスカーソルが乗ったとき」に適用される状態です。
transform: scale(1.1); は「1.1倍に拡大する」という意味になります。

このように、「通常時」＋「ホバー時」＋「transition」の3点セットで、
CSSだけで簡単にアニメーションが実現できます！

まず覚えておきたい！よく使われるホバーアニメーション6選

ここでは、実際のWeb制作の現場でもよく使われているホバーアニメーションを、6つに厳選して紹介します。

「この動き見たことある！」と思うものも多いはず。
まずは、基本的なパターンを知っておくことで、どんな場面にも応用しやすくなりますよ◎

コピペで使えるサンプルコードも載せていますが、クラス名（.buttonや.cardなど）はご自身のHTML構造にあわせて変更してくださいね◎

① 拡大（transform: scale）

.button {
  transition: transform 0.3s ease;
}
.button:hover {
  transform: scale(1.1);
}

【特徴】	マウスを乗せたときにふわっと拡大して注目させる演出
【使いどころ】	ボタン・画像・カードなど
【ポイント】	目立たせたい要素におすすめ！

② 移動（transform: translate）

.card {
  transition: transform 0.3s ease;
}
.card:hover {
  transform: translateY(-5px);
}

【特徴】	上に少し浮き上がるような動き
【使いどころ】	カードレイアウト・ボタンなど
【ポイント】	hoverで“押せそう感”を出したいときに◎

③ フェード（opacity）

.image {
  transition: opacity 0.3s ease;
}
.image:hover {
  opacity: 0.7;
}

【特徴】	ホバー時に少し薄く（または濃く）見せる
【使いどころ】	画像の切り替えやリンクの背景に
【ポイント】	暗くするだけで視線が集中しやすくなる！

④ 色の変化（color / background-color）

.button {
  background-color: #eee;
  color: #333;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.button:hover {
  background-color: #333;
  color: #fff;
}

【特徴】	ホバー時に色が変わるシンプルな演出
【使いどころ】	ナビゲーション・ボタン全般
【ポイント】	`transition`を指定することで、色の変化がなめらかに！

⑤ 下線スライド（::after + transform）

.link {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: #333;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.link:hover::after {
  transform: scaleX(1);
}

【特徴】	下線がスッと伸びてくる演出
【使いどころ】	テキストリンク・メニューなど
【ポイント】	初期状態で `scaleX(0)` にしておくのがミソ！

⑥ シャドウで立体感（box-shadow）

.card {
  transition: box-shadow 0.3s ease;
}
.card:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

【特徴】	ホバー時に影がついて立体感や“押せそう感”を出す演出
【使いどころ】	カード・画像・ボタンなど万能
【ポイント】	ふわっと浮かせたいときに◎