CSS のトランジションはどのように動作しますか？

Question

Accepted Answer

**トランジション**は、プロパティを瞬時に変更するのではなく、時間をかけて古い値から新しい値へ滑らかにアニメーションさせます。*何を*アニメーションさせるかと*どのくらいの時間*をかけるかを宣言し、（多くの場合 `:hover` やクラスを介して）プロパティを変更することでトリガーします。

```css
.button {
  background: blue;
  transition: background 0.3s ease;  /* animate background over 300ms */
}
.button:hover {
  background: darkblue;  /* on hover, it fades smoothly instead of snapping */
}
```

## 省略記法の 4 つの部分

```css
transition: background 0.3s ease 0s;
/*          │          │    │    └── delay before starting */
/*          │          │    └─────── timing function (the easing curve) */
/*          │          └──────────── duration */
/*          └─────────────────────── property to animate (or `all`) */
```

## 複数のプロパティをアニメーションさせる

```css
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-4px);          /* lifts up */
  box-shadow: 0 8px 20px rgba(0,0,0,0.2); /* + deeper shadow */
}
```

`all` を使うのではなく、各プロパティを（カンマ区切りで）列挙しましょう。`all` は意図しないものを誤ってアニメーションさせ、パフォーマンスを損なう可能性があります。

## タイミング関数

```css
transition-timing-function: ease;        /* slow-fast-slow (default) */
/* linear | ease-in | ease-out | ease-in-out */
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* custom curve */
```

## パフォーマンス: transform/opacity をアニメーションさせる

```css
/* ✅ cheap — GPU-composited, no layout recalculation */
transition: transform 0.3s, opacity 0.3s;
/* ❌ expensive — animating width/top/left triggers layout on every frame */
transition: width 0.3s, left 0.3s;
```

`transform` と `opacity` をアニメーションさせることを優先しましょう。これらはレイアウトの再計算を行わずにコンポジターによって処理されるため、滑らかさ（60fps）を保てます。

## アクセシビリティ

```css
@media (prefers-reduced-motion: reduce) {
  * { transition: none; } /* respect users who get motion sickness */
}
```

## なぜ重要なのか

トランジションは、わずか 1 行で UI をレスポンシブで生き生きとした印象にする洗練さ（ホバーエフェクト、滑らかな状態変化）を加えます。

パフォーマンスのために `transform`/`opacity` をアニメーションさせること、そして `prefers-reduced-motion` を尊重することを知っているかどうかが、滑らかでアクセシブルなモーションとカクついたアニメーションを分けるポイントです。