【CSS】transitionとは？hoverアニメーションの書き方や効かない原因を解説

CSSでボタンにマウスを乗せたとき、色がふわっと変わったり、カードが少し浮いたりする動きを見たことがあると思います。このような変化をなめらかにするために使うのがtransitionです。ただし、transitionは「どこに書くのか」「何を動かせるのか」を間違えると、まったく効かないように見えることがあります。

この記事では、「css transition」と調べている方に向けて、transitionの基本、hoverアニメーションの作り方、よく使う指定、効かない原因、実務での注意点まで解説します。

CSSのtransitionとは？

transitionとは、CSSの値が変わるときに、変化の速度や動き方を指定するプロパティです。

.button {
  background: #1f7a8c;
  transition: background 0.3s ease;
}

.button:hover {
  background: #14515d;
}

この例では、ボタンにマウスを乗せたときに背景色が0.3秒かけて変化します。

transitionは「変化する前の状態」に書く

初心者が特につまずきやすいのが、transitionを書く場所です。

hoverアニメーションでは、:hover側ではなく、通常時のセレクタにtransitionを書くのが基本です。

.button:hover {
  background: #14515d;
  transition: background 0.3s ease;
}

.button {
  transition: background 0.3s ease;
}

.button:hover {
  background: #14515d;
}

hover側だけに書くと、マウスを外したときの戻り方が不自然になったり、期待通りに動かないことがあります。

transitionの基本構文

transitionは、次の4つをまとめて書くことができます。

transition: 対象プロパティ 時間 動き方 遅延時間;

たとえば、次のように書きます。

.box {
  transition: opacity 0.3s ease 0s;
}

項目	意味	例
transition-property	何を変化させるか	opacity、transform
transition-duration	何秒かけて変化させるか	0.3s、200ms
transition-timing-function	変化の加速・減速	ease、linear
transition-delay	何秒遅れて開始するか	0.2s

まずはこの書き方を覚えればOK

初心者の方は、まず次の形を覚えると実務で使いやすいです。

.element {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

複数のプロパティを動かしたい場合は、カンマで区切ります。

transition: all;は手軽ですが、意図しないプロパティまでアニメーションすることがあります。実務では、できるだけtransformやopacityのように対象を絞りましょう。

hoverでよく使うtransitionの実装例

ここでは、実務でよく使うhoverアニメーションを紹介します。

ボタンの色をなめらかに変える

<a class="button" href="#">詳しく見る</a>

.button {
  display: inline-block;
  padding: 12px 24px;
  background: #1f7a8c;
  color: #fff;
  text-decoration: none;
  transition: background 0.3s ease;
}

.button:hover {
  background: #14515d;
}

カードを少し浮かせる

カードUIでは、hover時に少し上へ移動させる表現がよく使われます。

.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

hoverで要素を動かす場合は、topやmarginよりtransformを使う方が実務では扱いやすいです。

実務でそのまま使える！おしゃれなhoverスニペット2選

実務のWeb制作で非常によく使う、 transition を活かしたアニメーションのコードです。デザインのアクセントにそのままコピーして使ってみてください。

① 画像をじんわり拡大させる（マスク付き）

大枠の要素に overflow: hidden; をかけ、中の画像（img）を transform: scale(1.1); で拡大させる定番の表現です。

【HTML】

<div class="zoom-box">
  <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=600&q=80" alt="PCの画像">
</div>

【CSS】

.zoom-box {
  width: 100%;
  max-width: 300px;
  height: 200px;
  overflow: hidden; /* 枠からはみ出た部分を隠す */
  border-radius: 8px;
}

.zoom-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 画像の拡大を0.3秒かけてなめらかにする */
  transition: transform 0.3s ease;
}

/* 親要素がhoverされたら、中のimgを拡大する */
.zoom-box:hover img {
  transform: scale(1.08);
}

② 下線が中央からスッと伸びるリンク

テキストリンクのホバー時に、下線が中央から左右に広がるモダンなアニメーションです。擬似要素（::after）の transform: scaleX(); を制御します。

【HTML】

<a class="line-link" href="#">詳しく見る</a>

【CSS】

.line-link {
  position: relative;
  text-decoration: none;
  color: #1f7a8c;
  font-weight: bold;
}

/* 下線の初期状態 */
.line-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px; /* 線の太さ */
  background-color: #1f7a8c;
  /* 最初は横幅を0（見えない状態）にして中央配置 */
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

/* hover時に横幅を1（100%）に伸ばす */
.line-link:hover::after {
  transform: scaleX(1);
}

transitionが効かない原因と対策

transitionが効かない場合は、原因を順番に切り分けることが大切です。

原因1：変化前と変化後の値がない

transitionは、CSSの値が変わるときに動きます。変化前と変化後の値がなければ、アニメーションできません。

.box {
  transition: opacity 0.3s ease;
}

.box:hover {
  color: red;
}

この例では、transitionの対象はopacityなのに、hoverで変えているのはcolorです。

.box {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.box:hover {
  opacity: 0.7;
}

原因2：displayは基本的にスムーズに変化しない

display: none;からdisplay: block;のような切り替えは、一般的なtransitionではなめらかに変化しません。

.panel {
  display: none;
  transition: display 0.3s ease;
}

.menu:hover .panel {
  display: block;
}

表示・非表示をなめらかに見せたい場合は、opacityやvisibility、transformを組み合わせます。

.panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.menu:hover .panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

displayの切り替えをそのままなめらかにしようとしても、期待通りに動かないことがあります。フェード表示にはopacityを使うのが定番です。

原因3：transitionをhover側だけに書いている

前述の通り、transitionは通常時の要素に書くのが基本です。

.button {
  transition: background 0.3s ease;
}

.button:hover {
  background: #333;
}

原因4：CSSの優先順位でhoverが上書きされている

WordPressテーマや別のCSSで、hover時の指定が上書きされていると、transition以前に値が変わっていないことがあります。

transitionが動かないときは、検証機能で「hover時に本当に値が変わっているか」を確認しましょう。

transitionとanimationの違い

CSSにはtransitionのほかに、animationもあります。どちらも動きを作れますが、向いている場面が違います。

比較	transition	animation
きっかけ	hoverやclass変更など、状態変化が必要	自動再生や繰り返しができる
書き方	シンプル	@keyframesを使う
向いている場面	ボタン、カード、メニュー	ローディング、繰り返しの装飾

hoverなどの状態変化をなめらかにしたいだけなら、まずはtransitionを使うのがおすすめです。

動きを付けるときの実務チェックリスト

確認項目	見るポイント	おすすめ
対象	何を動かすか明確か	allではなく対象を絞る
時間	速すぎ・遅すぎないか	0.2〜0.3秒程度から調整
動かすプロパティ	滑らかに動きやすいか	transformやopacity
スマホ	hover前提になっていないか	タップ操作でも意味が伝わる設計にする
アクセシビリティ	動きが強すぎないか	prefers-reduced-motionも検討する

なぜ実務でアクセシビリティ（配慮）が必要なのか？

「アニメーションはリッチな方が良い」と思いがちですが、Webサイトを訪れるユーザーの中には、画面の激しい動きや明滅によってめまい、吐き気、不快感（前庭感覚障害など）を覚える方がいます。

特に、近年アクセシビリティ（JIS X 8341-3やWCAG）への対応が企業のコーポレートサイトや公共サービスで強く求められるようになってきました。

実務のコーディング案件でも、仕様書に「prefers-reduced-motionへの対応必須」と明記されるケースが増えています。ただ動かせるだけでなく、「不要な人には動きを止める・弱める」という引き算の設計ができるようになると、プロのフロントエンドエンジニアとして一歩リードできます。

公式ドキュメントも確認する

transitionの仕様を正確に確認したい場合は、MDN Web Docsの公式情報も参考になります。

• MDN Web Docs transition
• MDN Web Docs transition-property
• MDN Web Docs prefers-reduced-motion

まとめ：transitionは通常時に書いて変化をなめらかにしよう

この記事では、CSSのtransitionについて解説しました。

transitionは、CSSの値が変化するときに、その変化をなめらかに見せるためのプロパティです。

基本形は、通常時のセレクタにtransition: 対象 時間 動き方;を書き、:hoverなどで変化後の値を指定します。

ボタンの色変更、カードの浮き上がり、メニューのフェード表示など、実務でよく使う動きはtransitionだけで十分作れます。ただし、displayの切り替え、hover側だけへの記述、対象プロパティのズレ、CSSの優先順位には注意しましょう。