可过渡性：能插值的与只能跳变的
不是所有属性都能过渡。CSS 把属性分两类：可插值（数值 / 颜色 / 长度 / transform——按 computed value 连续补间）与离散（display / visibility / content 等——默认不补间，在过渡时长的某一点直接跳变）。混淆这一点，就会写出「明明加了 transition
却没动」的样式。
1 · 可插值：连续补间
点切换：transform / background-color / border-radius / opacity 都按值连续过渡。
2 · 离散：默认不补间
同样点切换：opacity 平滑淡出，但若想靠 display: none 隐藏，它是离散属性、不参与过渡——会在结束时瞬间消失。让离散属性（含 display）也能过渡，要靠 transition-behavior: allow-discrete，见入场与出场。
3 · 过渡到 height: auto 的老问题
折叠面板想从 height: 0 平滑展开到内容高度，但 height: auto 的 auto 不是一个数值、无法插值——左边直接跳开。interpolate-size: allow-keywords（或 calc-size()）让 auto / fit-content 这类关键字也能参与插值——右边平滑展开。
4 · 速查：常见属性的可过渡性
| 属性 | 类型 | 过渡行为 |
|---|---|---|
opacity / color / background-color |
可插值 | 按 computed value 连续补间 |
transform / width / height（数值） |
可插值 | 连续补间 |
height: auto / fit-content |
关键字 | 需 interpolate-size 才能插 |
display / visibility / content |
离散 | 默认跳变；display 需 allow-discrete |
「加了 transition 却不动」多半源于可过渡性限制：目标属性是离散的（display / visibility / 关键字尺寸），或新旧值里有一端不是可插值的数值。解法分两路——离散属性走 allow-discrete + @starting-style；尺寸关键字走 interpolate-size / calc-size()（与 CSS Animation 进阶页同源）。