CSSトランジションで動きをつける方法【初心者向け】

transitionとは？

ボタンにマウスを乗せると色がふわっと変わる——そんな動きを作るのが CSS transition（トランジション） です。「状態の変化をなめらかにする仕組み」と覚えましょう。

transitionは「CSSの値が変わるときに、じわっと変化させる」プロパティです。JavaScriptなしで、CSSだけでなめらかな動きが作れます。

animationとの違いは、transitionは「状態が変わったとき（hoverなど）だけ動く」のに対し、animationは「自動で繰り返し動かせる」点です。

transitionとanimationは似ていますが、役割が違います。transitionは「状態Aから状態Bへの変化」を滑らかにします。hoverしたとき、クラスが切り替わったときなど、きっかけが必要です。一方animationは、きっかけがなくても自動で動き続けます。ループ再生や複雑な動きにはanimationを使います。

まずはtransitionを覚えましょう。シンプルで使いやすく、Webサイトの操作感を良くするのに最適です。

より複雑なアニメーションを作りたくなったらCSSアニメーション入門を読んでみてください。

transitionの4つのプロパティ

transition-property（何を変化させるか）

変化させたいCSSプロパティ名を指定します。all を指定するとすべてのプロパティが対象になります。

transition-duration（何秒かけるか）

変化にかかる時間を指定します。0.3s（0.3秒）や 500ms（500ミリ秒）のように書きます。

transition-timing-function（変化の速度カーブ）

変化の速度パターンを指定します。ease（ゆっくり始まりゆっくり終わる）、linear（一定速度）、ease-out（最後がゆっくり）などがあります。

transition-delay（何秒後に始めるか）

変化が始まるまでの待ち時間です。0.2s なら0.2秒後に変化が始まります。

ショートハンド記法

/* ショートハンド: プロパティ 時間 イージング 遅延 */
transition: background-color 0.3s ease 0s;

/* すべてのプロパティに適用 */
transition: all 0.3s ease;

/* 複数プロパティを個別に設定 */
transition: color 0.2s ease, transform 0.3s ease-out;

💡 CSS入門ガイドでCSSの基本文法を確認できます。

それぞれの値をもう少し詳しく見ていきましょう。

transition-propertyは「何を変化させるか」を指定します。background-color、transform、opacityなど、数値で表せるプロパティが対象です。allを指定するとすべてのプロパティに適用されます。ただしallは意図しないプロパティまで変化するので、必要なものだけ指定するのがおすすめです。

transition-durationは「何秒かけて変化するか」を指定します。0.2s〜0.4sが自然に感じる範囲です。0.1s以下だと速すぎて変化に気づきません。1s以上だと遅すぎてストレスを感じます。

transition-timing-functionは「変化の速度カーブ」を指定します。easeは最初と最後がゆっくりで、中間が速い動きです。linearは一定速度で変化します。ease-inは最初がゆっくりで加速します。ease-outは最初が速くて減速します。ease-in-outは最初と最後がゆっくりです。ボタンのhoverにはeaseかease-outがおすすめです。

transition-delayは「何秒後に変化を始めるか」を指定します。通常は0sで問題ありません。ナビゲーションのドロップダウンメニューなど、マウスが少し触れただけで開かないようにしたいときに0.1s〜0.2sの遅延を入れると使いやすくなります。

実践例3つ

ボタンのhover効果

.btn {
  background-color: #0d9488;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.btn:hover {
  background-color: #0f766e;
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

👉 hoverで動きをつける方法も参考にしてください。

カードの浮き上がり

.card {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

ナビゲーションの下線アニメーション

nav a {
  color: #333;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease;
}

nav a:hover {
  border-bottom-color: #0d9488;
}

ボタンのhover効果を詳しく解説します。transform: scale(1.05) でボタンが少し大きくなります。box-shadowで影をつけると「浮き上がった」ように見えます。この2つを組み合わせると、押せるボタンだと直感的にわかるデザインになります。

カードの浮き上がりは、translateY(-4px) で上に4px移動させています。マイナスの値で上方向に動きます。影を濃くすることで立体感が出ます。ECサイトやブログの記事一覧でよく使われるパターンです。

ナビゲーションの下線アニメーションも人気のパターンです。リンクの下に線を作り、hoverで色を透明から有色に変化させます。transitionをつけると線がふわっと現れるアニメーションになります。

👉 hoverの基本で詳しく解説しています。

よくある間違い

• displayプロパティはtransitionできない：display: none → display: block の変化にtransitionは効きません。代わりに opacity を使いましょう。
• allの使いすぎに注意：transition: all は便利ですが、意図しないプロパティまで変化してパフォーマンスが落ちることがあります。変化させたいプロパティだけ指定するのがベストです。

🔗 CSS背景の設定方法で背景色のtransitionを活用した例を見られます。

transitionが効かないときの対処法

transitionが効かない原因でよくあるものを紹介します。

1つ目は、displayプロパティの変化です。display: none から display: block への変化にはtransitionが効きません。要素の表示・非表示を切り替えたいときは、opacityとvisibilityを使いましょう。opacity: 0 で透明にし、visibility: hidden で操作を無効にします。

2つ目は、allの使いすぎです。transition: all を指定すると、意図しないプロパティ（widthやheightなど）まで変化してしまいます。レイアウトが崩れる原因になります。変化させたいプロパティだけを明示的に指定しましょう。

3つ目は、初期値が設定されていない場合です。transitionは「値Aから値Bへの変化」を滑らかにします。値Aが存在しないと変化を計算できません。例えばheight: auto からの変化はtransitionが効きません。具体的な数値を初期値として設定しましょう。

4つ目は、変化が瞬時に起きる場合です。JavaScriptでクラスを追加した直後にtransitionを期待しても、ブラウザが再描画する前に変化が完了してしまうことがあります。requestAnimationFrameを使うか、わずかな遅延を入れると解決します。

CSSの基本に不安がある人はCSS入門ガイドから始めましょう。最初のCSSの書き方は最初のCSSで学べます。背景色の変化についてはCSS背景の設定も参考にしてください。

まとめ

transitionを使いこなすと、ページのインタラクションが豊かになります。最初のCSSで基礎を固めてから挑戦しましょう。