不能——display、visibility、font-family等离散属性无中间态，无法插值；而opacity、transform、background-color、box-shadow等虽表面非数值，但支持CSS插值，可过渡。
transition 能不能过渡非数值属性？
不能——但“非数值”得先分清楚：opacity、transform 这类虽不直接写像素，但底层可插值；而 display、visibility、font-family 这类是离散状态，浏览器根本没法算中间帧，写了 transition 也白搭。
哪些“看起来不是数值”的属性实际能过渡？
关键看是否支持 CSS 插值（interpolation），不是看表面有没有单位：
-
opacity：0 → 1 是线性插值，完全支持 -
transform：比如translateX(0)→translateX(100px)或scale(1)→scale(1.2)，GPU 可加速，推荐优先用 -
background-color：rgb → hex → hsl 都能插值，但注意色域跳跃可能肉眼可见 -
box-shadow：只要 x/y/offest/radius/color 都有明确数值，就能过渡（不过旧版 Safari 对多层 shadow 支持不稳定）
display 和 visibility 为什么不行？
它们只有两个合法值：display: none/block、visibility: hidden/visible，没有中间态。浏览器遇到 display: none → block 会直接重排，跳过 transition。
替代方案必须绕开：
立即学习“前端免费学习笔记（深入）”；
- 用
opacity+pointer-events: none模拟隐藏/显示 - 用
max-height替代height: auto（设一个足够大的max-height值，再过渡到0） - 用
transform: scaleY(0)→scaleY(1)配合overflow: hidden实现折叠动画
transition 写多个属性时 comma 和 space 的坑
常见翻车点：把逗号写成空格，或者漏掉属性名后的时间值。
正确写法：transition: opacity 0.2s, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s;
错误写法：transition: opacity 0.2s transform 0.3s;（中间没逗号 → 只有 opacity 0.2s 生效）
更隐蔽的错：transition: opacity, transform 0.3s;（opacity 后没写时间 → 等价于 opacity 0s，瞬间完成）
