CSS 与布局 / CSS Transition · 状态间的隐式动画 / 可过渡性：能插值的与只能跳变的 待审核 2 / 6
interpolable vs discrete · by computed value · auto

可过渡性：能插值的与只能跳变的

不是所有属性都能过渡。CSS 把属性分两类：可插值（数值、颜色、长度、transform，按 computed value 连续补间）与离散（display、visibility、content 等，默认不补间，在过渡时长的中点直接跳变）。混淆这一点，就会写出「明明加了 transition 却没动」的样式。

1 · 可插值属性

图 1-1 · transform、background-color、border-radius、opacity 都按值连续过渡。可点切换观察补间过程。

2 · 离散属性

图 2-1 · 同样点切换：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 这类关键字也能参与插值。

图 3-1 · 左边不带 interpolate-size，直接跳开；右边带上后平滑展开。可反复开合对照。

4 · 常见属性的可过渡性

表 4-1 · 四类属性的过渡行为速查。
属性 类型 过渡行为
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 进阶页同源。

图 4-1 · 各类属性对应的 CSS 写法，可切换查看。