---
title: "トランジションとは？CSSで動きを滑らかにする基礎"
description: "ホバーや状態変化を「パッと切り替わる」ではなく「なめらかに変わる」ようにしたい人向けに、CSSトランジションの仕組みと指定する4つの要素を整理。UXを高める自然な動きをどう実装するかの基礎を解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/css-transition-term"
markdown: "https://giga-site.com/articles/css-transition-term/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# トランジションとは？CSSで動きを滑らかにする基礎

ボタンにマウスを乗せると色がパッと切り替わるより、じわっとなめらかに変わるほうが心地よく感じます。CSSのトランジションは、こうした状態の変化をなめらかにつなぐ仕組みです。この記事では、基本の考え方と指定する4つの要素、使うときのコツまでをやさしく解説します。

> Source HTML: https://giga-site.com/articles/css-transition-term
> Article index: https://giga-site.com/articles/index.md

## トランジションとは

トランジションとは、要素の状態が変わるときに、その変化を一定の時間をかけてなめらかにつなぐCSSの機能です。たとえば色や大きさが変わる瞬間を、パッと切り替えるのではなく、徐々に変化させられます。

よく使われるのは、マウスを乗せたとき（ホバー）の見た目の変化です。トランジションがないと色が一瞬で切り替わりますが、トランジションを設定すると短い時間をかけて滑らかに変わり、操作の心地よさが増します。

複雑な動きを作るアニメーションとは違い、トランジションは「状態Aから状態Bへの変化」をなめらかにすることに特化したシンプルな仕組みです。

## 指定する4つの要素

transitionでは、主に4つの内容を指定できます。これらを組み合わせて、どのプロパティを、どれくらいの時間で、どんな加減速で、いつ変化させるかを決めます。

最初は対象プロパティと変化の時間の2つだけでも十分に動きます。慣れてきたら加減速や遅延を加えて、より細かく印象を整えるとよいでしょう。

- 対象プロパティ：何を変化させるか（色、大きさ、位置など）
- 変化の時間：変化にかける長さ（例：0.3秒）
- 加減速のしかた：変化の速度の付け方（一定、ゆっくり始まるなど）
- 開始までの遅延：変化が始まるまでの待ち時間

## 実務ではどこで関係する？

トランジションは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

トランジションについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める

## 基本的な使い方

トランジションは、変化させたい元の要素にtransitionプロパティを設定し、ホバーなどの状態でプロパティの値を変えるだけで動きます。状態が変わった瞬間に、設定した時間をかけてなめらかに変化します。

具体的な設定の流れは次のとおりです。

1. 変化させたい要素に通常時のスタイルを設定する
2. その要素にtransitionを指定し、対象プロパティと変化の時間を書く
3. ホバーなどの状態に対して、変化後の値（色や大きさなど）を設定する
4. 画面で実際にマウスを乗せて、変化が自然か確認する
5. 速すぎ・遅すぎる場合は変化の時間を微調整する

## 使うときのコツと注意点

変化の時間は長すぎると操作が重く感じられ、短すぎると効果がほとんど分かりません。一般に0.2〜0.4秒程度が心地よいとされ、用途に応じて調整します。

トランジションは控えめに使うのが上品です。あらゆる要素を派手に動かすと、かえって落ち着かない印象になります。ボタンやリンクなど、操作に反応してほしい部分にしぼって使うと効果的です。

動きに敏感な利用者への配慮として、過度な動きは避けるのが望ましいとされています。装飾としての動きは、なくても情報が伝わる範囲にとどめるのが安全です。

## まとめと確認の場面

CSSのトランジションは、状態の変化をなめらかにつなぐシンプルで効果的な機能です。対象・時間・加減速・遅延の4要素を押さえ、控えめに使うことで、操作の心地よさを高められます。

動きの自然さは、実際に触ってみないと分かりにくいものです。ギガサイト便でHTMLをドロップして共有URLを発行すれば、関係者にホバーの動きなどを実機で確かめてもらえます。同じURLのまま差し替えられるので、時間を調整した版を送り直さずに再確認してもらえます。

## よくある質問

### トランジションとアニメーションの違いは何ですか？

トランジションは状態Aから状態Bへの変化をなめらかにつなぐシンプルな仕組みです。一方アニメーションは、複数の段階を経るより複雑で自由度の高い動きを作れます。用途に応じて使い分けます。

### 変化の時間はどのくらいが適切ですか？

一般に0.2〜0.4秒程度が心地よいとされています。長すぎると操作が重く感じられ、短すぎると効果が分かりにくくなるため、実際に触って調整するとよいでしょう。

### どんな要素にトランジションを使うとよいですか？

ボタンやリンクなど、操作に反応してほしい部分にしぼって使うのが効果的です。あらゆる要素を動かすと落ち着かない印象になりがちなので、控えめに使うのがコツです。

### 動きが苦手な利用者への配慮は必要ですか？

はい。過度な動きは一部の利用者にとって負担になることがあります。装飾としての動きは、なくても情報が伝わる範囲にとどめるのが望ましいとされています。

### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？

細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。

## 関連記事

- [CSSセレクタとは？要素を狙ってスタイルを当てる基礎](https://giga-site.com/articles/css-selector-term/index.md)
- [詳細度（specificity）とは？CSSが効かない時に確認する優先順位](https://giga-site.com/articles/css-specificity-term/index.md)
- [CSSのpositionとは？static・relative・absolute・fixedの違い](https://giga-site.com/articles/css-position-term/index.md)
- [px・em・rem・%とは？CSSの単位の違いをやさしく解説](https://giga-site.com/articles/css-units-term/index.md)
- [CSSカスタムプロパティ（変数）とは？色やサイズを使い回す仕組み](https://giga-site.com/articles/css-variables-term/index.md)
- [グラデーションとは？CSSで色を滑らかに変化させる基礎](https://giga-site.com/articles/css-gradient-term/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "トランジションとは？CSSで動きを滑らかにする基礎",
  "description": "ホバーや状態変化を「パッと切り替わる」ではなく「なめらかに変わる」ようにしたい人向けに、CSSトランジションの仕組みと指定する4つの要素を整理。UXを高める自然な動きをどう実装するかの基礎を解説します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/css-transition-term",
  "url": "https://giga-site.com/articles/css-transition-term",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "トランジションとアニメーションの違いは何ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "トランジションは状態Aから状態Bへの変化をなめらかにつなぐシンプルな仕組みです。一方アニメーションは、複数の段階を経るより複雑で自由度の高い動きを作れます。用途に応じて使い分けます。"
      }
    },
    {
      "@type": "Question",
      "name": "変化の時間はどのくらいが適切ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "一般に0.2〜0.4秒程度が心地よいとされています。長すぎると操作が重く感じられ、短すぎると効果が分かりにくくなるため、実際に触って調整するとよいでしょう。"
      }
    },
    {
      "@type": "Question",
      "name": "どんな要素にトランジションを使うとよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ボタンやリンクなど、操作に反応してほしい部分にしぼって使うのが効果的です。あらゆる要素を動かすと落ち着かない印象になりがちなので、控えめに使うのがコツです。"
      }
    },
    {
      "@type": "Question",
      "name": "動きが苦手な利用者への配慮は必要ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "はい。過度な動きは一部の利用者にとって負担になることがあります。装飾としての動きは、なくても情報が伝わる範囲にとどめるのが望ましいとされています。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```