【ホバーアニメーション】ふわっと拡大アニメーションの作り方｜ボタン・画像に使えるCSS scaleの基本

2025-08-07

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

【実用例①】ふわっと拡大アニメーションの作り方｜ボタン・画像に使えるCSS scaleの基本

Webサイトのボタンや画像が、マウスを乗せたときにふわっと大きくなる——
そんな“拡大アニメーション”は、ユーザーに注目してほしい場所を自然に伝えるのにぴったりの演出です。

しかもこの動き、CSSの transform: scale() を使えば、ほんの数行で実装できるんです。

私自身、CSSを学び始めたばかりのころにこの拡大アニメーションを初めて試したとき、
「動いた…！✨」と小さく感動したのを覚えています。

この記事では、transform: scale() を使った基本的なホバーアニメーションの書き方と、実際の活用例を紹介していきます！

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

transform: scale() を使ったホバーの基本構文

まずは、拡大アニメーションの一番シンプルな書き方から見ていきましょう。

.button {
  transition: transform 0.3s ease;
}

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

ポイント解説

transition は変化をなめらかにするための設定です。
　ここでは transform プロパティに対して、0.3秒かけて ease（自然なカーブ）で変化させています。
:hover の状態で transform: scale(1.1); を指定すると、マウスを乗せたときに要素が1.1倍に拡大します。
クラス名（.button）は自分のHTML構造にあわせて自由に変更してくださいね◎

このコードは、ボタン・画像・カードUIなどあらゆる要素に応用できる基本形です。

実用例①｜ボタンにふわっと拡大アニメーションをつける

一番よく使われているのが、CTA（行動を促す）ボタンやリンクボタンなどへの拡大アニメーションです。

ホバーアニメーションの実例紹介

※今回はデモ用として、リンク先のない<button>タグを使用していますが、
リンク付きのボタンとして<a>タグを使っても、同じようにホバーアニメーションを適用できます。

<!-- デモ用ボタン -->
<button class="demo-button">ホバーボタン</button>

<!-- リンク付きボタンにする場合 -->
<a href="#" class="demo-button">ホバーボタン</a>

.demo-button {
  display: inline-block;
  background-color: #ee6eac; //ボタン背景色
  color: white;
  padding: 12px 24px;
  border-radius: 30px; //ボタン角丸
  text-decoration: none;
  transition: transform 0.3s ease;
}

.demo-button:hover {
  transform: scale(1.05);
}

拡大率は 1.05 と少し控えめに設定すると、動きすぎず自然な印象に
ボタンの背景色や角丸デザインと組み合わせると、シンプルでもしっかり目を引く演出になります

「押せそう感」「アクション誘導力」がぐっと高まるので、クリックしてもらいたい場所にはおすすめです！

実用例②｜画像・カードに拡大アニメーションをつける

画像やカード型のUIに拡大アニメーションを加えると、より視覚的に“選ばれている”感じを出すことができます。

ホバーアニメーションの実例紹介

※補足：今回ご紹介するのは、マウスを乗せた瞬間に“その場で拡大”させるアニメーションです。
画像をクリックして別画面で大きく表示する「モーダル拡大」とは目的も仕組みも異なるので、使い分けてみてくださいね。

<div class="img-hover">
  <img src="sample.jpg" alt="サンプル画像">
</div>

.img-hover {
  overflow: hidden;
  display: inline-block;
  border-radius: 8px;
}

.img-hover img {
  width: 100%;
  transition: transform 0.4s ease;
}

.img-hover:hover img {
  transform: scale(1.1);
}

.img-hover に overflow: hidden; をつけることで、画像の拡大が枠からはみ出さなくなります
img タグに直接 transition を指定し、hover時は親要素ではなく画像自体を拡大させるのがコツ

カードデザインにも応用できて、
例えば「おすすめ記事」「メニュー項目」などの一覧表示でも使いやすいですよ◎