トランジションとは

CSS の transition プロパティで、状態の変化（ホバーなど）を瞬時にではなく滑らかに見せる技法。

概要

transition プロパティを指定すると、ホバーやクリックなどで CSS の値が変わるときに、瞬時に切り替わるのではなく一定時間をかけて滑らかに変化するようになります。色・幅・位置など、変化させたいプロパティを指定でき、変化の速さの緩急（イージング）も ease・linear・cubic-bezier() などで調整できます。ボタンのホバーやメニューの開閉など、状態変化を伴うほぼすべての部品で使われる基礎的な技法です。

別名

表記ゆれ：トランジション、css transition、イージング、cubic-bezier

「イージング」は変化の緩急そのものを指す言葉で、トランジションの一部として指定します。「ふわっと変わるようにして」という言い方をされることもあります。

AI への伝え方

「ホバーしたら色が滑らかに変わるようにして」で伝わります。変化にかける時間（0.2 秒くらいなど）と、動きの質感（一定の速さで動く linear か、なめらかに緩急が付く ease か、跳ねるような動きにしたいか）を伝えると仕様がぶれません。

似たパーツとの違い

「キーフレームアニメーション」は @keyframes で複数の状態を順番に定義し、自動でループさせたり複雑な動きを作ったりする技法です。トランジションはホバーやクリックなど「状態が変わったとき」だけ動く点が違い、自動で動き続ける表現には向きません。

デモ

プロパティの例（ホバーしてください）

イージングの違い（帯にホバーしてください）

ease

linear

cubic-bezier

コード

HTML

<div class="transition-demo">
  <div class="transition-demo__group">
    <p class="transition-demo__caption">プロパティの例（ホバーしてください）</p>
    <div class="transition-demo__row">
      <button class="transition-demo__sample transition-demo__sample--color" type="button">色</button>
      <button class="transition-demo__sample transition-demo__sample--width" type="button">幅</button>
      <button class="transition-demo__sample transition-demo__sample--move" type="button">位置</button>
    </div>
  </div>
  <div class="transition-demo__group">
    <p class="transition-demo__caption">イージングの違い（帯にホバーしてください）</p>
    <div class="transition-demo__track">
      <div class="transition-demo__ball transition-demo__ball--ease">ease</div>
    </div>
    <div class="transition-demo__track">
      <div class="transition-demo__ball transition-demo__ball--linear">linear</div>
    </div>
    <div class="transition-demo__track">
      <div class="transition-demo__ball transition-demo__ball--cubic">cubic-bezier</div>
    </div>
  </div>
</div>

CSS

.transition-demo {
  display: flex;
  flex-direction: column;
  gap: 28px;
  font-family: sans-serif;
}

.transition-demo__caption {
  margin: 0 0 12px;
  font-size: 13px;
  color: #666666;
}

.transition-demo__row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.transition-demo__sample {
  padding: 10px 16px;
  border: 2px solid #0017c1;
  border-radius: 8px;
  background: #ffffff;
  color: #0017c1;
  font-size: 14px;
  cursor: pointer;
}

.transition-demo__sample--color {
  transition: background 0.3s ease, color 0.3s ease;
}

.transition-demo__sample--color:hover {
  background: #0017c1;
  color: #ffffff;
}

.transition-demo__sample--width {
  width: 80px;
  transition: width 0.3s ease;
}

.transition-demo__sample--width:hover {
  width: 160px;
}

.transition-demo__sample--move {
  transition: transform 0.3s ease;
}

.transition-demo__sample--move:hover {
  transform: translateY(-6px);
}

.transition-demo__track {
  position: relative;
  height: 40px;
  margin-bottom: 12px;
  border-radius: 20px;
  background: #e6e6e6;
  overflow: hidden;
}

.transition-demo__ball {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 90px;
  height: 32px;
  border-radius: 16px;
  background: #0017c1;
  color: #ffffff;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.transition-demo__ball--ease {
  transition: left 0.6s ease;
}

.transition-demo__ball--linear {
  transition: left 0.6s linear;
}

.transition-demo__ball--cubic {
  transition: left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.transition-demo__track:hover .transition-demo__ball {
  left: calc(100% - 94px);
}

@media (prefers-reduced-motion: reduce) {
  .transition-demo__sample,
  .transition-demo__ball {
    transition: none;
  }
}