CSS transition多行声明仅最后一行生效，正确写法是用逗号分隔多组完整声明，每组至少含属性名和持续时间，如transition: width 0.3s, opacity 0.6s;。
transition写多行只会生效最后一行
很多人以为写两行 transition: width 0.3s; 和 transition: opacity 0.6s; 就能让两个属性各自过渡，实际浏览器只认第二行——第一行被完全覆盖。这是 CSS 简写属性的通用行为，background、font 也一样。
验证方法很简单：打开 DevTools → Styles 面板，看 transition 那一行有没有被划掉；或者切到 Computed 标签页，搜 transition-property，看解析出的实际值是不是只剩一个。
正确写法是用逗号分隔完整组
必须把所有属性+时间+缓动+延迟写在同一行 transition 声明里，每组至少包含「属性名」和「持续时间」两项，中间用空格隔开，组与组之间用逗号隔开：
transition: width 0.3s ease, opacity 0.6s ease-in, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
- 每组四项（属性、时间、缓动、延迟）可以省略后两项，但不能跳着写——比如
opacity 0.6s ease-in 0.1s, transform 0.2s是合法的；但opacity 0.6s, transform 0.2s ease-in里第二组缺了延迟，整组会被忽略 - 没列出来的属性（比如
height）不会触发过渡，哪怕 JS 改了它的值 - 不支持过渡的属性（如
display、position）写了时间也没用，改值仍是立即生效
单独设置 duration + property 容易错位匹配
有人尝试拆成三行写：transition-property: width, opacity;、transition-duration: 0.3s, 0.6s;、transition-timing-function: ease, linear;。这看似合理，但风险很高：
立即学习“前端免费学习笔记（深入）”；
- 如果
property列表比duration长，多余项会重复使用第一个 duration 值（0.3s），不是你想要的“一一对应” - 一旦某处漏写或顺序错位（比如删掉一个
opacity却忘了同步删duration），整个匹配就乱了 - 简写写法更直观、更可控，推荐优先用
transition单行声明
哪些属性能放心设不同时间
不是所有 CSS 属性都支持独立控制过渡节奏。安全可用的常见属性包括：
-
opacity、transform（最顺滑，首选） -
width、height、margin、padding -
color、background-color -
font-size、line-height虽可过渡，但可能有渲染抖动，不如用transform: scale()替代 - 自定义属性（如
--my-var）必须先用@property注册，否则设了时间也无效
真正容易被忽略的是：过渡效果是否触发，不仅取决于 transition 声明，还依赖属性是否在触发状态（如 :hover）下发生了**可动画的值变化**——比如从 visibility: hidden 切到 visible 不会动，但 opacity: 0 → 1 就会。
