CSS transitionが効かない原因｜ゆっくり動かしたいのに反映されない時の解決方法

HTML/CSS

2026年6月5日

CSS transitionが効かない原因｜ゆっくり動かしたいのに反映されない時の解決方法

まず初めに

Web制作をしていると、

  • transitionを書いたのに効かない
  • hoverした瞬間に切り替わる
  • ゆっくり動いてほしいのに一瞬で変わる

ということがあります。

私も実案件でボタンやカードデザインを実装している際に、transitionを書いているのに反映されず原因調査に時間を使ったことがあります。

結論から言うと、transitionは「変化後」ではなく「変化前の要素」に設定する必要があります。

例えば以下のようなホバーアニメーションを作りたいケースです。

  • ボタンの色変更
  • 画像の拡大
  • カードの浮き上がり
  • メニューの色変更

しかし、

.button:hover {
  background: blue;
}

だけでは一瞬で切り替わります。

実際に起きたエラー

よくあるミスです。

.button:hover {
  background: blue;
  transition: 0.5s;
}

または

.card:hover {
  transform: translateY(-10px);
  transition: 0.5s;
}

これでは期待通りに動かないことがあります。

結論（先に知りたい人向け）

transitionは通常状態に書きます。

.button {
  transition: 0.5s;
}

.button:hover {
  background: blue;
}

原因の詳細

transitionは、

「変化を監視する設定」

です。

そのため変化が起こる前から待機している必要があります。

NGコード

.button:hover {
  transition: 0.5s;
  background: blue;
}

なぜダメなのか

処理順序は以下です。

  1. hover発生
  2. 色変更
  3. transition適用

変化後にtransitionが設定されるためです。

解決方法（ステップ形式）

Step1

通常状態にtransitionを書く

.button {
  transition: background-color 0.5s ease;
}

Step2

hoverで変化を書く

.button:hover {
  background-color: blue;
}

Step3

動作確認する

よくある実例

transitionは「何をアニメーションさせるか」を指定できます。

そのため、動かしたい内容によって指定するプロパティが変わります。

色をゆっくり変更したい場合

ボタンやリンクでよく使われるパターンです。

.button {
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: blue;
}

動き

  • グレー → 青
  • 赤 → 緑

など背景色がなめらかに変化します。

要素を拡大したい場合

カードや画像でよく使われます。

.card {
  transition: transform 0.3s ease;
}

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

動き

  • 画像が少し大きくなる
  • カードが浮き上がる

などの演出ができます。

要素を移動したい場合

最近のカードデザインでよく見る動きです。

.card {
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-10px);
}

動き

  • 上に10px移動
  • 浮き上がるように見える

transformは拡大だけでなく移動にも使えます。

透明度を変更したい場合

画像やボタンによく使われます。

.item {
  transition: opacity 0.3s ease;
}

.item:hover {
  opacity: 0.7;
}

動き

  • 少し薄くなる
  • クリックできる要素だと伝えられる

枠線の色を変更したい場合

シンプルなデザインでよく使います。

.box {
  border: 2px solid #ccc;
  transition: border-color 0.3s ease;
}

.box:hover {
  border-color: blue;
}

動き

  • グレーの枠
  • 青い枠

へなめらかに変化します。

文字色を変更したい場合

リンクやメニューで定番です。

a {
  transition: color 0.3s ease;
}

a:hover {
  color: red;
}

動き

文字色がゆっくり変わります。

複数を同時に変更したい場合

実務ではこれが一番多いです。

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

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,.15);
}

動き

  • 少し上へ移動
  • 影が濃くなる

結果として、

「カードが浮き上がったように見える」

演出になります。

初心者向けまとめ

transitionが効かない原因の8割以上は、

:hover

側に書いていることです。

覚えるべき基本形はこれだけです。

要素 {
  transition: 〇〇 0.3s ease;
}

要素:hover {
  変化;
}

imgはあくまで一例ですが、

  • img
  • button
  • a
  • div
  • card
  • menu

すべて同じ考え方で動きます。

一言

CSSは小さな記述ミスで思った通りに動かなくなることがあります。

ただ、今回のように原因が分かると意外とシンプルです。

「transitionは通常状態に書く」

まずはこの1つだけ覚えておけば大丈夫です。

Category

関連記事