CSSプロパティの変化を滑らかにアニメーションするプロパティです。プロパティ名、持続時間、タイミング関数、遅延を指定でき、ユーザーインタラクションに対する自然な視覚フィードバックを提供します。
transition: <property> <duration> <timing-function> <delay>| 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を含む。
transition: all 0.3s ease;全てのプロパティを0.3秒でスムーズに変化
transition: opacity 0.2s ease-in-out;透明度のみを0.2秒で変化
ホバー効果やインタラクティブな要素には必須。パフォーマンスを考慮してtransformやopacityを優先。
AIはtransition: all を多用しがちですが、意図しないプロパティまでアニメーションしパフォーマンスも悪化するため、対象プロパティの明示が原則です。またdisplayやheight: autoは従来transitionできない代表格で、現在はtransition-behavior: allow-discreteやinterpolate-sizeという解決策があります（AIの知識にはないことが多い）。
このtransition: allを、実際に変化するプロパティだけの指定に最適化して
displayの切替を伴うこの表示/非表示にtransitionを効かせたい。allow-discreteと@starting-styleを使って
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。