トランジション（変化の滑らかさ）
transitiontransition-durationtransition-timing-functiontransition-delay
CSSトランジションは、プロパティの値が変化するときに滑らかなアニメーションを加えます。ホバーやフォーカスなどの状態変化を自然に見せるための基本テクニックです。
デモ：タイミング関数の比較（ホバーしてみてください）
ease
デフォルトlinear
一定速度ease-in
ゆっくり始まるease-out
ゆっくり終わるease-in-out
両端がゆっくりcubic-bezier
バネ効果デモ：transition-delay（ホバーすると色変化が遅延）
ホバーすると移動はすぐ、背景色の変化は 0.4秒 遅れて起きます
delay: 0.4s
デモ：複数プロパティのトランジション
ホバー！
background・transform・border-radius・box-shadow をそれぞれ異なるタイミングでトランジション
コード例
/* 基本的なトランジション */
.button {
background: #6366f1;
transition: background 0.3s ease;
}
.button:hover {
background: #ec4899;
}
/* shorthand: property duration timing-function delay */
.card {
transition: transform 0.3s ease-out 0s;
}
/* 複数プロパティを個別に指定 */
.element {
transition:
background 0.4s ease,
transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.4s ease;
}
/* すべてのプロパティに適用（パフォーマンス注意） */
.all-props {
transition: all 0.3s ease;
}
/* タイミング関数の種類 */
.ease { transition-timing-function: ease; }
.linear { transition-timing-function: linear; }
.ease-in { transition-timing-function: ease-in; }
.ease-out { transition-timing-function: ease-out; }
.ease-in-out { transition-timing-function: ease-in-out; }
.spring { transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
/* 遅延 */
.delayed {
transition: background 0.3s ease 0.5s; /* 0.5秒後に開始 */
}比較：タイミング関数
| 値 | 動き | 用途 |
|---|---|---|
ease | 始めと終わりが緩やか（デフォルト） | 汎用的なホバーエフェクト |
linear | 一定速度 | ローディングバー、連続アニメーション |
ease-in | ゆっくり始まり速くなる | 要素が画面外に消える時 |
ease-out | 速く始まりゆっくり終わる | 要素が出現する時（最も自然） |
ease-in-out | 両端がゆっくり | スライドイン/アウト、モーダル |
cubic-bezier() | 完全カスタム制御 | バネ効果、オーバーシュート |
steps(n) | ステップ刻みで変化 | スプライトアニメーション |
NEW@starting-style と transition-behavior: allow-discrete（2023）
従来のCSSトランジションは display: none から display: block への変化をアニメーションできませんでした。@starting-style を使うと、要素が最初に表示された瞬間（DOMに追加された時、または display: none から変化した時）のトランジション開始状態を定義できます。
/* display: none → block のトランジション (Chrome 117+, Firefox 129+) */
.dialog {
display: none;
opacity: 0;
transform: translateY(-20px);
transition: opacity 0.3s ease, transform 0.3s ease,
display 0.3s allow-discrete; /* allow-discrete が必要! */
}
.dialog.open {
display: block;
opacity: 1;
transform: translateY(0);
}
/* display: none のときの「トランジション前」の状態を定義 */
@starting-style {
.dialog.open {
opacity: 0;
transform: translateY(-20px);
}
}
/* transition-behavior の設定 */
.element {
transition: all 0.3s ease;
transition-behavior: allow-discrete; /* display, overlay など離散値のアニメーションを許可 */
}Chrome 117+, Firefox 129+, Safari 17.4+ でサポート。Popover API や dialog 要素と組み合わせると強力です。
🤖 AIプロンプトテンプレート
CSSのtransitionプロパティを使ったスムーズなアニメーション実装例をReact + Tailwind CSSで作成してください。 要件: - ease / linear / ease-in / ease-out / ease-in-out / cubic-bezier のタイミング関数をホバーで比較するデモ - transition-delayを使って複数プロパティが時間差で変化するアニメーションデモ - 複数プロパティ（background / transform / border-radius / box-shadow）を異なるタイミングでトランジションするカードUI - ホバー時にcubic-bezierでバネ効果（オーバーシュート）を演出するボタン - @starting-styleと transition-behavior: allow-discreteを使ったdisplay: noneからのフェードインデモ - Tailwind CSSのtransitionユーティリティ（transition / duration / ease）を活用したコンポーネント
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。