【CSS】transition（トランジション）の使い方｜hoverなどでゆっくり、なめらかに変化するアニメーション

サイトにちょっとした動きを加えるだけで見た目の印象は大きく変わります。

その中でも CSSの「transitionトランジション」 は、

要素の状態変化をなめらかに表現できるプロパティ。

例えば、

• ボタンにマウスを乗せたときに背景色がじんわり変わる
• 画像をクリックしたときにふわっと拡大する

といった効果は、ほとんどが transition を使うだけで実現できます。

この記事では、「CSS transitionの基本構文」から「主要プロパティの解説」「実例コード」「よくある注意点」「応用テクニック」まで解説します。

よく見かける、スクロールに連動したアニメーションもtransitionを使って実装できます。

CSS Transitionとは？

transition とは、要素の状態が変化したときに、その変化を「時間をかけて」なめらかに表現できる仕組みです。

通常、CSSのスタイルは即座に切り替わります。例えば、ボタンに :hover を指定して背景色を変えるとマウスを乗せた瞬間に色がパッと切り替わります。

.button {
  background: #fff;
}
.button:hover {
  background: #2980b9; /* 即座に切り替わる */
}

しかし transition を使えば、色が徐々に変化する自然なアニメーションにできます。

.button {
  background: #fff;
  transition: background 1s ease; /* 1秒かけて変化 */
}
.button:hover {
  background: #2980b9;
}

See the Pen transition by Turicco (@Turicco) on CodePen.

CSSでアニメーションをつける2つの方法

CSSで要素に動きを与える方法は大きく分けて2つあります。

transitionとanimationプロパティの違い

大きな違いを以下の表で比較してみます。

特徴	transition	animation
発火条件（トリガー）の有無	必要 hover・クリック・class追加などの状態変化	不要 ページ読み込み直後から動作可能
@keyframes の有無	不要 プロパティに直接指定	必要 動きの流れを定義する必要あり
動きの性質	一度きりの変化 開始 → 終了まで	繰り返しや無限ループが可能
実装の手軽さ	シンプル 短いコードでOK	少し複雑 コード量が増える
向いている用途	ちょっとした効果 hover時の色変更、フェード、サイズ変更など	動きが続く演出 ローディングアニメーション、点滅や回転など

まとめると、

animation は多機能ですが、簡単な効果なら transition で十分です。目的に応じて使い分けましょう。

より詳しい animation の使い方については以下の記事をご覧ください。

CSS Transition｜基本構文と書き方

書き方は 一括指定（ショートハンド） と 個別指定（ロングハンド） の2通りがあります。

一括指定（ショートハンド）

一行でまとめて書ける、最も一般的な書き方です。

selector {
  transition: プロパティ 時間 イージング 遅延;
}

例：

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

各値の意味

値	意味	例
プロパティ	どのCSSプロパティをアニメーションさせるか	background, opacity, transform など
時間	アニメーションにかける時間	0.3s, 1s
イージング（timing-function）	変化の速度カーブ	ease, linear, ease-in など
遅延（delay）	アニメーション開始までの待ち時間	0s, 0.5s など

個別指定（ロングハンド）

より細かく制御したい場合は、個別プロパティで指定します。

.box {
  transition-property: background-color;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-delay: 0s;
}

おすすめの書き方

• 推奨：必要なプロパティだけ指定する
  複数のプロパティを半角スペース区切りで指定できます。

.box {
  transition: transform 0.3s ease, opacity 0.5s linear;
}

メリット

• 不要なプロパティを除外でき、パフォーマンスが良い
• 意図しないアニメーションが起きにくい（特にhoverやfocus時）

---

• 注意：「all」は簡単だけど非推奨

.box {
  transition: all 0.3s ease;
}

メリット

• 書き方が簡単で、すべての変化にアニメーションが適用される

デメリット

• すべてのCSS変更に反応するため、意図しないアニメーションが発生しやすい
• パフォーマンスに悪影響を与える可能性がある

CSS Transitionの主要プロパティ解説

transition はショートハンドでまとめて書けますが、細かく制御したいときは個別のプロパティを理解しておくことが大切です。ここでは主要な4つを解説します。

transition-property

どのプロパティをアニメーションさせるかを指定します。

例

.box {
  transition-property: background-color;
  transition-duration: 0.3s;
}

よく使う値

• 個別指定：background-color, opacity, transform など
• all：すべてのプロパティに適用（便利だがパフォーマンス注意）

transition-duration

アニメーションにかける時間を指定します。

例

.box {
  transition-property: transform;
  transition-duration: 0.5s; /* 0.5秒で変化 */
}

• 単位は 秒（s） または ミリ秒（ms）

• 0.3s（300ms）がUIアニメーションの定番
• 短すぎると効果が分かりにくく、長すぎると操作性が悪化

transition-timing-function

変化の速度カーブ（イージング）を指定します。

例

.box {
  transition: transform 0.5s ease-in-out;
}

代表的な値と実際の動作

• ease：自然な加速・減速（デフォルト）
• linear：一定の速度
• ease-in：ゆっくり始まる
• ease-out：ゆっくり終わる
• ease-in-out：ゆっくり始まり、ゆっくり終わる
• cubic-bezier(n, n, n, n)：カスタムカーブ
  • オリジナルの動きを作れる（高度な応用に登場）

ease

linear

ease-in

ease-out

ease-in–out

transition-delay

アニメーションを開始するまでの待ち時間を指定します。

例

.box {
  transition: opacity 0.5s ease 0.2s; /* 0.2秒待ってから開始 */
}

連続的な動きを演出するときに有効（例：リスト項目を1つずつフェードインさせる）

CSS Transition｜よく使うプロパティと相性の良い組み合わせ

• 色の変化（color, background-color）
  ボタンやリンクのhoverに定番。
• 透明度（opacity）
  フェードイン／フェードアウトの表現に。
• 変形（transform）
  scale, translate, rotate など、サイズや位置の変化に。
• サイズ（width, height）
  hoverで広がるメニューなどに。
  ※height: auto には直接transitionが効かないので、max-heightやtransformで工夫。
• 複数プロパティの組み合わせ
  opacity + transform などを組み合わせるとリッチな動きに。

詳しい挙動やコード例は、実例集のCodePenで確認できます。

CSS Transition｜実例集（コピペOK）

ここからは、transition を使った実際のコード例を紹介します。すべて コピペしてそのまま動作確認できる サンプルなので、実際に試しながら理解を深めてみてください。

hoverで色を少し薄くするボタン

もっともシンプルな例。マウスオーバー時にボタンの透明度がスムーズに変化します。

See the Pen transition｜ by Turicco (@Turicco) on CodePen.

.btn {
  transition: opacity 0.5s ease; /* 透明度をなめらかに変化 */
}

.btn:hover {
  opacity: 0.8; /* 少し薄くする */
}

• 基本中の基本。フォーム送信ボタンやリンクボタンに使いやすい。

ズーム（transform: scale）

マウスを乗せると要素が拡大される、ギャラリーやECサイトでよく見るエフェクトです。

See the Pen transition｜ by Turicco (@Turicco) on CodePen.

/* 拡大アニメーション用 */
.scale {
  transform: scale(1);
  transition: transform 0.3s ease; /* スムーズに拡大 */
}

.scale:hover {
  transform: scale(1.05); /* 少し拡大 */
}

• hover時に「じんわり拡大」することで、視覚的な訴求力がアップします。

フェードイン（opacity）

ボタンクリックでふわっと表示されます。

See the Pen transition｜フェードイン by Turicco (@Turicco) on CodePen.

/* フェード */
.fade-box {
  opacity: 0; /* 初期は透明 */
  transition: opacity 0.5s ease;
}

.fade-box.on {
  opacity: 1; /* 表示 */
}

スライドメニュー（transform + translate）

ハンバーガーメニューなどでよく使うスライドインエフェクトです。

See the Pen transition｜スライドメニュー（transform + translate） by Turicco (@Turicco) on CodePen.

/* スライドメニュー（動き部分） */
.menu {
  transform: translateX(-100%);    /* 初期は画面外に配置 */
  transition: transform 0.4s ease; /* 滑らかにスライド */
}

.menu.open {
  transform: translateX(0); /* openクラスでスライドイン */
}

• left や margin ではなく、transform を使うのがパフォーマンス的に◎。

複数プロパティを同時に変化

透明度と位置を組み合わせた「浮き上がるカード」。

See the Pen transition｜複数プロパティの組み合わせ by Turicco (@Turicco) on CodePen.

/* 動き用クラス */
.card-animate {
  opacity: 0.6;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease; /* 滑らかに変化 */
}

.card-animate:hover {
  opacity: 1;
  transform: translateY(-5px); /* 少し浮き上がる動き */
}

• 「マウスを乗せるとふわっと浮く」効果もよく使われるエフェクトです。

CSS Transition｜応用テクニック

基本の transition を理解したら、より表現力を高めるために応用テクニックを活用しましょう。

cubic-bezier でオリジナルの動きを作る

transition-timing-function は ease や linear 以外に、cubic-bezier 関数で独自の速度カーブを指定できます。

See the Pen CodePen｜ by Turicco (@Turicco) on CodePen.

.box {
  transform: translateX(0);
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* バウンス風 */
}

.box.move {
  transform: translateX(200px);
}

• transition-timing-function: cubic-bezier(...) で 速度カーブを自由に調整。
• .move クラスの付け外しで スライド＋バウンスアニメーション を簡単に実現

CSS変数と組み合わせる

CSS変数を使えば、transition の時間やイージングを一括管理できます。

:root {
  --transition-time: 0.4s;
  --transition-ease: ease-in-out;
}

.card {
  transition: transform var(--transition-time) var(--transition-ease);
}

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

• 大規模サイトやデザインシステムで統一感を持たせやすい。

擬似要素にtransitionを適用

::before や ::after と組み合わせると、装飾的なアニメーションを作れます。

See the Pen transition｜ by Turicco (@Turicco) on CodePen.

.link {
  position: relative;
  display: inline-block;
  color: #333;
  text-decoration: none;
}

.link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 5px;
  background:  #5054b4;
  transition: width 0.3s ease;
}

.link:hover::after {
  width: 100%; /* 下線がスライドして出現 */
}

• hoverで「線が伸びるリンクアニメーション」はモダンサイトで定番。

JavaScriptとの連携

JavaScriptでクラスを付け替えるだけで、複雑なUIもスムーズに実装できます。

See the Pen transition｜ by Turicco (@Turicco) on CodePen.

<button id="toggleBtn">メニュー切替</button>
<div class="menu">メニュー内容</div>

.menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.menu.open {
  max-height: 200px; /* スライド表示 */
}

const btn = document.getElementById('toggleBtn');
const menu = document.querySelector('.menu');

btn.addEventListener('click', () => {
  menu.classList.toggle('open');
});

• max-height と transition でスライドイン／アウトを実現
• JavaScript で .open クラスを付け外しするだけで簡単に動作

CSS Transition｜よくある失敗と注意点

transition は便利ですが、使い方を間違えると「動かない」「動きがぎこちない」といった問題が起こります。ここでは、よくある失敗例とその解決方法を解説します。

display: none; は transition できない

.box {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

• 問題
  • display: none は「非表示状態」なので、transitionが効かない
  • この場合、opacity と visibility を組み合わせるのが一般的

• 解決例

.box {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}

.box.show {
  opacity: 1;
  visibility: visible;
}

height: auto; は transition できない

• height を auto に設定すると、transitionでスムーズに伸縮できません
• 解決策：max-height を使う

.menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.menu.open {
  max-height: 200px; /* 十分大きめに設定 */
}

transition: all; の注意点

• 全プロパティを対象にすると便利ですが、不要なプロパティまでアニメーションされるため、パフォーマンス低下の原因に
• 必要なプロパティだけ指定 するのがベスト

/* NG */
.box {
  transition: all 0.3s ease;
}

/* OK */
.box {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

モバイルでのパフォーマンス

• transform と opacity はスムーズ
• width, height, margin などは描画が多くなるため、負荷がかかりやすい
• 特にスマホ・低スペック端末では transform + opacity を優先

CSS transitionの使い方｜まとめ

transitionプロパティを使うとシンプルなコードで滑らかな動きを実現できるのでホバーアクションを追加する際などにぜひ使ってみてください。

このtransitionを使って、スクロールに連動したアニメーションも導入できます。スクロールのタイミングでふわっとした動きにしたい方はチェック。

ボタンや画像などのホバーアニメーションの具体例をもっと見たい方は、「ホバーアニメーションの実装例まとめ」も参考になります。