【CSS】transitionの使い方｜ふわっと表示するhoverアニメーション・主要プロパティ一覧・動かない原因まで解説

サイトにほんの少し動きを加えるだけで、UIの印象や操作感が変わります。

• hover時に色がふわっと変わる
• クリック時に自然に拡大する
• メニューがスッとスライドする

こうした「状態変化をなめらかに見せる」ための仕組みがtransitionです。

この記事では、

• 基本構文
• 実用サンプル
• よくある失敗
• パフォーマンスと仕様の注意点

までを整理して解説します。

CSS transitionとは？

transitionは値が変化したときにその差分を一定時間かけて補間する仕組みです。

通常、CSSの値は変更された瞬間に再描画されます。

しかし transition を指定すると、変化を滑らかに表示できます。

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

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

hoverした瞬間に切り替わるのではなく、0.3秒かけて徐々に変化します。

transition は hover だけでなく、

• classの追加・削除
• JavaScriptによるスタイル変更
• スクロール連動の表示制御

など、値が変化するあらゆる場面で利用できます。

animationとの違い

CSSで動きをつける方法は大きく2つあります。

• transition：状態変化をきっかけに動く（hover・class追加など）
• animation：@keyframesで動きを定義し、自動再生や繰り返しが可能

▶ 使い分けの目安

• UIの自然な変化 → transition
• 自動再生や演出 → animation

UI設計では、まずtransitionが基本になります。

※ animationの詳しい使い方については別記事で解説しています。

CSSアニメーションの基本と使い方【初心者向け】@keyframes・実例・軽くするコツ

Webサイトに動きを加えたいなら、まず覚えておきたいのが CSSアニメーション（@keyframes と animation） です。この2つを理解すれば、Ja...

turicco.com

CSS transition｜まずは動きを見てみる実用サンプル集

ここではtransition を使った実際のコード例を紹介します。

実際に試しながら、プロパティの動き方を体感してみてください。

ボタン hover（opacity）

もっともシンプルな例です。

マウスオーバー時にボタンの透明度がスムーズに変化します。

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

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

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

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

ズーム演出（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); /* 少し拡大 */
}

• width を変更するのではなく、transform を使うのがポイントです。
• パフォーマンス面でも有利です。

フェード表示（opacity + class切替）

クラスを付け外しすることで、要素をふわっと表示させる例です。

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

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

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

• クラス切替の仕組みは、スクロール連動アニメーションにも応用できます。
• Intersection Observer を使った実装方法は、以下の記事で詳しく解説しています。

スクロールアニメーションでふわっと表示する方法｜CSSとIntersectionObserverで実装【コピペOK】

Webサイトでよく見かける、スクロールに合わせて要素がふわっと表示されるフェードインやスライドアニメーション。「自分のサイトでも導入したいけど難しそう…」と思う...

turicco.com

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

横からスライドインするメニュー例です。ハンバーガーメニューでよく使われます。

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

.menu {
  transform: translateX(-110%);    /* 初期は画面外 */
  transition: transform 0.4s ease; /* なめらかに移動 */
}

.menu.open {
  transform: translateX(0); /* 表示位置へ */
}

• left や margin ではなくtransform を使うことでレイアウト再計算を抑え、滑らかな動きになります。

浮き上がるカード（複数プロパティ）

透明度と位置を同時に変化させる「浮き上がり」演出です。

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

.card {
  opacity: 0.8;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.card:hover {
  opacity: 1;
  transform: translateY(-5px); /* 少し上へ */
}

• 複数プロパティはカンマ区切りで指定します。
• UIカードやブログ一覧などでよく使われます。

アコーディオン（max-heightで高さ制御）

height: auto は transition できないため、max-height を使って実装します。

See the Pen transition｜アコーディオン（max-height） by Turicco (@Turicco) on CodePen.

.accordion {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.accordion.open {
  max-height: 200px; /* コンテンツより大きい値を指定 */
}

• auto は数値ではないため補間できません。
• 高さアニメーションではこのテクニックが定番です。

順番表示（transition-delay）

複数要素を時間差で表示する例です。

See the Pen transition｜順番表示（delay） by Turicco (@Turicco) on CodePen.

.item {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.item.show {
  opacity: 1;
  transform: translateY(0);
}

.item:nth-child(1) { transition-delay: 0.1s; }
.item:nth-child(2) { transition-delay: 0.2s; }
.item:nth-child(3) { transition-delay: 0.3s; }

• transition-delay を使うことで、自然な「順番表示」が可能になります。
• リスト表示やスクロール演出でよく使われるテクニックです。

このあと仕組みを解説します。

CSS transition｜基本構文と書き方

transition は、ショートハンド（一括指定） と ロングハンド（個別指定） の2通りで書けます。

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

最も一般的な書き方です。

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

例：

.box {
  transition: background 0.3s ease;
}

複数指定も可能です。

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

各値の意味

durationは必須：指定しない場合、値は変化しますがアニメーションは発生しません。

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

より明示的に書きたい場合は、個別プロパティで指定します。

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

設計意図を明確にしたい場合や、大規模なスタイル設計で有効です。

CSS transitionの主要プロパティ一覧と意味

ショートハンドで書くことが多いですが、理解を深めるために個別プロパティも押さえておきましょう。

transition-property

アニメーション対象のプロパティを指定します。

transition-property: opacity;

よく使うプロパティ

• opacity
• transform
• background-color
• color

all も指定できますが、意図しない変化まで対象になるため基本的には避けます。

transition-duration

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

例

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

単位

• 秒（s）
• ミリ秒（ms）

設計の目安

• 200〜300ms：最も自然なUI体験になりやすい
• 100ms未満：変化が速すぎて気づきにくい
• 500ms以上：操作が重く感じられる可能性あり

transition-timing-function（違いを比較）

速度の変化（加速・減速）を指定します。

例

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

代表的な値一覧と各値の違い

• ease（標準）
  自然な加速・減速
• linear（一定の速度）
  機械的・無機質
• ease-in（徐々に速く）
  出現系に向いている
• ease-out（徐々に遅く）
  hoverやボタン向き
• ease-in-out（両方）
  モーダルや展開系
• cubic-bezier(n, n, n, n)
  動きを細かく調整できるカスタムカーブ。

実際の動きをチェック

ease

linear

ease-in

ease-out

ease-in–out

設計の考え方

• hoverや押下のフィードバック → ease-out
• 要素の登場 → ease-in / ease-in-out
• 一定速度が必要 → linear

細かく調整したい場合は cubic-bezier() を使用します。

transition: all 0.3s cubic-bezier(x1, y1, x2, y2);

cubic-bezier(0.25, 0.1, 0.25, 1)

transition-delay

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

例

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

使いどころ

• 要素を順番に表示させる
• リストを段階的にフェードインさせる
• 立体的な動きを演出する

delay を活用すると、単なる変化から一段上の演出へと引き上げられます。

CSS transition｜動かないときの原因と解決法

transition は便利な反面、仕様を理解していないと「動かない」「思った通りに動かない」といった問題が起こりがちです。

ここでは、よくある原因とその解決方法を解説します。

display: none; は transition できない

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

• なぜ動かない？

display: none; が指定されている要素は、そもそも画面に描画されていません。

transition は「描画されている状態の数値変化」を補間する仕組みのため、非表示状態（display: none）ではアニメーションできません。

• 解決方法：opacity + visibility を使う

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

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

• opacity は数値プロパティなので補間できる
• visibility でクリック防止もできる

表示・非表示をアニメーションさせたい場合は、displayではなくopacityを使うのが基本です。

height: auto; はtransitionできない

• なぜ動かない？

auto は「数値」ではないからです。

transition は「数値同士」の間を補間する仕組みなので、auto のような計算値は対象外になります。

• 解決方法：max-height を使う

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

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

方のように、明示的な数値で代替します。

transition: all; の注意点

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

all を指定すると、すべてのCSS変更がアニメーション対象になります。

その結果、

• 意図しないプロパティまで動く
• レイアウト変更も補間しようとする
• パフォーマンス低下の原因になる

• 推奨：必要なプロパティだけ指定

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

特別な理由がない限り、all は避けるのがベストです。

パフォーマンス

アニメーションには「描画コスト」があります。

• パフォーマンスが良い

• transform
• opacity

これらは比較的再描画が少なく、スムーズに動作します。

• 負荷がかかりやすい

• width
• height
• margin
• top / left

これらはレイアウト再計算（reflow）を引き起こすため、特にスマホや低スペック端末ではカクつきやすくなります。

CSS transitionの使い方｜まとめ

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

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

スクロールアニメーションでふわっと表示する方法｜CSSとIntersectionObserverで実装【コピペOK】

Webサイトでよく見かける、スクロールに合わせて要素がふわっと表示されるフェードインやスライドアニメーション。「自分のサイトでも導入したいけど難しそう…」と思う...

turicco.com

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

動きで魅せる！ホバーアニメーションボタン・おしゃれな矢印リンク＆下線スライド（CSS付き）

他のサイトで見かける「このリンクデザインおしゃれ！」や「ボタンの動きがいいな」といった演出。どうやって作られているの？実は、CSSだけで簡単に再現できるデザイン...

turicco.com