transition多个属性必须用逗号分隔，空格会导致仅首项生效；应明确列出需过渡的属性而非all；transition-delay等子属性独立作用于每项声明；display/visibility变化不触发transition。
transition 写多个属性时用逗号分隔，不是空格
很多人误以为 transition 多个属性可以像 margin 那样用空格连写，结果发现只有第一个生效。实际必须用逗号分隔每个过渡声明，否则浏览器只解析第一个，后面全被忽略。
常见错误写法：transition: width 0.3s, height 0.3s, opacity 0.2s; 看起来对？其实没问题——但如果你写成 transition: width 0.3s height 0.3s opacity 0.2s;（中间没逗号），那只有 width 0.3s 被识别，其余直接丢弃。
- 每个逗号分隔的片段是一个独立的
transition-property transition-duration transition-timing-function transition-delay组合 - 可以混用简写和单属性：比如
transition: background-color 0.2s, transform 0.3s ease-out, opacity 0.15s; - 未显式声明的子属性（如只写
transform）不会继承其他片段的duration或timing-function，必须各自写全
transition-property 用 all 还是具体属性？性能差别很大
写 transition: all 0.3s; 最省事，但非常危险。它会让所有可动画的 CSS 属性（包括 box-shadow、border-color、甚至 z-index 在某些旧浏览器里）都尝试过渡，不仅可能触发意外视觉变化，还会强制浏览器在每次重绘前做更重的样式计算。
更稳妥的做法是明确列出真正需要过渡的属性：
立即学习“前端免费学习笔记（深入）”；
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.2s linear, background-color 0.25s ease;
-
transform和opacity是 GPU 可加速的，优先选它们做动效 -
width/height/top/left等会触发布局（layout），导致重排，应避免用于高频动画 - 如果某属性只是偶尔变化（如
cursor），根本不用加进transition列表
transition-delay 对每个属性独立生效
transition-delay 不是全局延迟，而是绑定在每个逗号分隔的过渡声明上。这意味着你可以让不同属性错峰启动，做出层叠动画效果。
例如按钮悬停时，先淡入背景，再平移图标，最后显示文字：
button {
transition:
background-color 0.2s 0s,
transform 0.3s 0.1s,
color 0.15s 0.25s;
}
- 第 1 个声明：背景色立即开始（
0s延迟） - 第 2 个：
transform等待 0.1 秒再启动 - 第 3 个：文字颜色要等到 0.25 秒后才过渡
- 注意：延迟值必须紧跟在对应持续时间之后，顺序不能错
用 transition 的 shorthand 时，遗漏值会回退到初始值
transition 简写语法要求至少指定 property 和 duration，其它三项（timing-function、delay）可省略，但省略后不是“保持上次值”，而是重置为默认：ease 和 0s。
比如你写了：transition: opacity 0.2s, transform 0.3s ease-out; —— 第二项显式写了 ease-out，但第一项没写，那它的 timing function 就是默认的 ease，不是继承第二项的。
- 不要指望「共享」
timing-function或delay，每个片段都是独立解析的 - 如果多个属性需要完全一致的过渡行为，复制粘贴比省略更可靠
- 调试时可临时加上
transition: all 0.1s linear;快速验证是否触发了过渡，但上线前务必换回精确列表
display: none 切到 block，或者从 visibility: hidden 切到 visible，这些都不会触发 transition——因为它们本身不可动画。得换用 opacity + transform 或配合 transitionend 事件手动控制显示逻辑。 
