逗号分隔的 transition 写法能生效，但需每组为“属性 持续时间 缓动函数 延迟”，组内空格分隔、组间逗号分隔；漏写缓动或延迟会左补默认值；all 不覆盖已声明属性，但仅对可插值属性（如 color、transform）有效，display、height:auto 等无效。
transition逗号分隔写法是否生效
能生效，但必须满足条件：每个分号前的声明都得是合法的 transition 子属性组合，且顺序不能错。浏览器会把逗号分隔的整段值，按空格拆解后逐个解析为独立的过渡规则。
怎么写才真正控制多个属性分别过渡
用逗号分隔多组「属性 持续时间 缓动函数 延迟」，每组之间用逗号，组内用空格。不是简单写 transition: width 0.3s, height 0.3s 就完事——漏掉缓动或延迟时，浏览器会从左往右补默认值，容易误判行为。
-
transition: width 0.3s ease, height 0.5s linear 0.1s—— 宽度用默认ease，高度指定linear且延后0.1s -
transition: opacity 0.2s, transform 0.4s cubic-bezier(0.2, 0.8, 0.4, 1)—— 两个属性不同曲线、不同耗时 - 别写
transition: all 0.3s, opacity 0.1s——all会覆盖后面针对opacity的单独设置，实际只生效all那条
transition-property设为all时，哪些属性能过渡
不是所有 CSS 属性都支持过渡。只有「可计算的、有中间状态」的属性才行，比如 color、margin、transform、opacity。像 display、height（当值为 auto 时）、font-family 这类不可插值的属性，即使写了 transition: all，也不会产生过渡效果，只是静默忽略。
-
height: auto→height: 100px：无过渡，因为auto无法参与数值插值 -
visibility: hidden→visibility: visible：无过渡，该属性只有离散状态 -
background-image：不支持过渡（CSS Images Level 4 才开始实验性支持，目前基本无效）
transition触发失败的常见原因
写了多条 transition 却没反应，大概率不是语法错，而是触发时机或初始状态问题。
立即学习“前端免费学习笔记（深入）”；
- 元素还没渲染完成就加 class 触发过渡：比如在
DOMContentLoaded里立刻操作，但样式表还没加载完，导致初始状态读取为0或none - 过渡前后值类型不一致：比如
border: 1px solid red→border: none，浏览器无法插值，直接跳变 - 父元素
overflow: hidden切掉了transform动画的视觉范围，看起来像没动 - 用了
will-change: transform但没配对应transform变化，反而干扰了原有过渡链
