transition可同时过渡多个属性，用逗号分隔各声明，浏览器独立执行；需明确指定属性名与持续时间，慎用all；仅支持可计算、有中间值的属性，transform和opacity性能更优；transition-property: none会完全禁用所有过渡。
transition 同时过渡多个属性的写法
直接在 transition 属性里用逗号分隔多个声明即可，每个声明控制一个属性的过渡行为。浏览器会分别对它们独立触发、独立执行，互不干扰。
常见错误是只写一个 transition: all 0.3s，看似省事，实则容易引发意外动画（比如无意中过渡了 box-shadow 或 z-index）；更糟的是，all 在某些旧版 Safari 中有兼容性问题。
transition: width 0.2s ease, opacity 0.3s linear, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);- 每个部分必须包含「属性名 + 持续时间」，「timing-function」和「delay」可选但建议显式写出，避免继承或默认值导致行为不一致
- 如果某属性没在列表中出现（比如
height），它就不会有过渡效果——这是可控的关键点，不是缺陷
哪些 CSS 属性支持 transition
只有「可计算的、有中间值」的属性才能过渡，比如 opacity、transform、width、color。像 display、z-index、font-family 这类离散型或无中间态的属性，设了 transition 也无效。
特别注意：height 和 width 设为 auto 时无法过渡——浏览器无法计算起始/结束的像素值。此时应改用 max-height 或 transform: scaleY() 替代。
立即学习“前端免费学习笔记（深入）”；
- 推荐优先使用
transform和opacity：它们触发硬件加速，性能更好，且不会触发重排（reflow） - 慎用
left/top：会触发 layout，动画卡顿风险高 - 查完整支持列表可参考 MDN 的 CSS animated properties 页面
transition-property 设为 none 时的行为
如果某个状态里写了 transition-property: none，那它会**完全禁用所有过渡**，包括之前通过逗号设置的多个属性——这个值的优先级高于其他 transition 简写声明。
这常被用来做“开关式”控制：比如 hover 时启用过渡，点击后加个 class 把 transition-property 设为 none，就能让后续样式变更立刻生效，不带动画。
- 不要混用简写
transition和单独的transition-property: none，后者会覆盖前者 - 想临时停用某一个属性？删掉它在逗号列表里的那一项就行，别动
none - 调试时可用 DevTools 的「Animations」面板查看哪些属性实际被监听和触发
transition-delay 对多属性的影响
transition-delay 是按声明顺序一一对应的：第一个 delay 控制第一个属性，第二个 delay 控制第二个属性……如果 delay 数量少于属性数，多余属性用 0s。
例如：transition: width 0.3s 0.1s, opacity 0.3s 0.2s, transform 0.3s; —— transform 的 delay 是 0s，不是 0.2s。
- 延迟值不支持百分比，只能是
s或ms - 负延迟（如
-0.1s）会让动画从中间状态开始，适合做“追帧”衔接，但容易出错，建议只在明确需要时使用 - 如果所有属性都要统一 delay，写成
transition-delay: 0.15s更清晰，但要注意它必须和transition-property配合使用才安全
transition 的层叠逻辑和属性支持边界——不是写上了就一定动，也不是动了就一定顺。多属性并行时，务必逐个确认它们是否可动画、是否有冲突的 timing-function、是否在不同状态间被意外重置。 
