# transition

> CSSプロパティの変化を滑らかにアニメーションするプロパティです。プロパティ名、持続時間、タイミング関数、遅延を指定でき、ユーザーインタラクションに対する自然な視覚フィードバックを提供します。

- カテゴリ: アニメーション・エフェクト
- URL: https://www.css-dictionary.com/property/transition/

## 構文

```css
transition: <property> <duration> <timing-function> <delay>
```

## Tailwindでは

- `transition` → transition-property: color, background-color, border-color, opacity, transform など
- `transition-colors` → transition-property: color, background-color, border-color, ...
- `transition-none` → transition-property: none
- 一般形: `duration-{n}ms / ease-out / delay-{n}ms と組み合わせる`
- 補足: 所要時間の既定は150ms。v4ではtransition-behavior: allow-discreteを含む。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 26+ / Firefox 16+ / Safari 9+ / Edge 12+

## コード例

### 例1: 全てのプロパティを0.3秒でスムーズに変化

```css
transition: all 0.3s ease;
```

### 例2: 透明度のみを0.2秒で変化

```css
transition: opacity 0.2s ease-in-out;
```

## TIPS

ホバー効果やインタラクティブな要素には必須。パフォーマンスを考慮してtransformやopacityを優先。

## AIがよく間違えるポイント

AIはtransition: all を多用しがちですが、意図しないプロパティまでアニメーションしパフォーマンスも悪化するため、対象プロパティの明示が原則です。またdisplayやheight: autoは従来transitionできない代表格で、現在はtransition-behavior: allow-discreteやinterpolate-sizeという解決策があります（AIの知識にはないことが多い）。

## AIへの依頼文例

- このtransition: allを、実際に変化するプロパティだけの指定に最適化して
- displayの切替を伴うこの表示/非表示にtransitionを効かせたい。allow-discreteと@starting-styleを使って

## 関連プロパティ

- [transform](https://www.css-dictionary.com/property/transform.md)
- [opacity](https://www.css-dictionary.com/property/opacity.md)
- [at-starting-style](https://www.css-dictionary.com/property/at-starting-style.md)
- [at-property](https://www.css-dictionary.com/property/at-property.md)
- [view-transition-name](https://www.css-dictionary.com/property/view-transition-name.md)
- [interpolate-size](https://www.css-dictionary.com/property/interpolate-size.md)