【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、focus、class追加など）＝トリガー必須	自動再生・繰り返し可能（トリガー不要）
制御方法	プロパティに直接指定（@keyframes不要）	@keyframes で細かく定義
典型的な用途	hover時の色変更、フェード、スライド	バナーの動き、ローディングアニメ、無限点滅
実装の手軽さ	シンプルで短いコードで実装可能	少し複雑（コード量が増える）
繰り返し	できない（1回だけ）	繰り返し可能（infiniteなど）

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

まとめると、

• transition = トリガーが必要で、シンプルなワンアクション用
• animation = @keyframes で定義し、自動・繰り返しもできる本格モーション用

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変更に反応するため、意図しないアニメーションが発生しやすい
  • パフォーマンスに悪影響を与える可能性がある

基本構文と書き方まとめ

書き方	特徴	おすすめ度
transition: all 0.3s ease;	簡単だがやや雑、パフォーマンス注意	★☆☆
transition: transform 0.3s ease, opacity 0.5s;	明確で安全、推奨	★★★
個別指定（4プロパティで）	柔軟だがやや冗長	★★☆

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: background 0.3s ease; /* 背景色を滑らかに変化 */
}

.btn:hover {
  background: #2980b9; /* hoverで色を変更 */
}

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

フェードイン／フェードアウト（opacity）

要素の表示・非表示をスムーズに切り替えられます。

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

/* フェード */
.fade {
  opacity: 0; /* 初期は透明 */
  transition: opacity 0.5s ease; /* 滑らかに変化 */
}

.fade.show {
  opacity: 1; /* 表示状態 */
}

• JavaScriptで .show クラスを付け外しするだけで自然なフェードを実現できます。

スライドメニュー（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 を使うのがパフォーマンス的に◎。

ズーム（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時に「じんわり拡大」することで、視覚的な訴求力がアップします。

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

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

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

/* 動き用クラス */
.card-animate {
  opacity: 0.7;
  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 を優先

遅延や重ね掛けに注意

• 複数の transition を連続で使うと、意図しないタイミングで動くことがあります
• 解決策：transition-delay を適切に設定して順序を制御

CSS transitionの使い方｜まとめ

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

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