css中多个transition声明会覆盖而非叠加，正确写法是用逗号分隔同一声明内的多组属性；仅可计算且有中间值的属性（如opacity、transform）支持过渡，display等不支持；慎用transition: all。
transition写多行会覆盖，不是叠加
直接写两行 transition: width 0.3s; 和 transition: opacity 0.2s;，后一行会完全取代前一行——CSS 不支持多个 transition 声明共存。浏览器只认最后一个生效的声明，这是很多人调试半天发现“opacity没动”的根本原因。
用逗号分隔多组参数才是正确写法
所有想控制的属性必须写在**同一个** transition 声明里，用英文逗号分隔：
transition: width 0.3s ease-in, opacity 0.2s linear 0.1s, transform 0.35s cubic-bezier(0.2, 0.8, 0.4, 1);
每组参数依次对应「属性名、持续时间、缓动函数、延迟」，缺省部分按默认值补（timing-function 是 ease，delay 是 0s）。
-
width没写delay，所以立即开始；opacity显式写了0.1s，就晚 100ms 启动 - 属性名必须拼写完整，
background-color不能缩成background - 如果某属性临时不想过渡，得单独设
transition-property: none，而不是从列表里删掉它
哪些属性能真正过渡，哪些只是“看起来动了”
不是所有 CSS 属性都支持过渡。关键看两点：是否可计算、是否有中间值。
- ✅ 支持的：
opacity、transform、width、color、max-height（注意不是height: auto） - ❌ 不支持的：
display、z-index、font-family、height: auto、left/top（会触发重排，卡顿且不可靠） -
transform和opacity最推荐——它们走 GPU 合成层，不触发布局重排，动画更顺
慎用 transition: all，尤其在旧 Safari 中
transition: all 0.3s; 看似省事，但实际风险高：
- 可能意外过渡到你没意识到的属性，比如
box-shadow或outline，造成视觉干扰 - 某些旧版 Safari（≤14.1）对
all的解析有 bug，会导致部分过渡失效或延迟异常 - 当某个状态里写了
transition-property: none，它会**彻底禁用整个 transition 链**，连逗号后面的其他属性也一起失效
真正难的不是写法，而是判断哪些属性值得过渡、哪些该交给 transform 替代、哪些干脆不该动——这需要结合渲染原理和具体交互意图来权衡。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
