CSS transition 默认支持多属性同步过渡，关键在于正确声明：显式列出属性可精准控制时长与缓动，用 all 易误带动画，避免只写时长；transition-property: none 会彻底禁用过渡；优先使用 transform 和 opacity 以获得 GPU 加速。
transition 同时作用于多个 CSS 属性
CSS transition 默认就是支持多属性过渡的，只要在声明中列出多个属性（或用 all），它们就会在触发时同步开始、按各自设定的时长和缓动函数变化。关键不是“能不能”，而是“怎么写才不翻车”。
- 写成
transition: width 0.3s, height 0.3s, opacity 0.2s;—— 每个属性独立控制时长和函数 - 写成
transition: all 0.3s ease;—— 所有可动画属性统一走同一套参数，但容易误带动画意外属性（比如background-color突然也动了） - 避免只写
transition: 0.3s;—— 这等价于transition: all 0.3s ease 0s;，浏览器会自动补全，行为不可控
transition-property 值为 none 或 inherit 时的陷阱
当父元素设了 transition: all 0.3s;，子元素想禁止单个属性过渡，不能只靠 transition-property: none; —— 它只禁用「新增」的过渡，对已继承的无效。真正有效的是覆盖整个声明：
button {
transition: all 0.3s;
}
button:hover {
width: 200px;
background-color: #007bff;
}
button.no-bg-transition:hover {
background-color: #0056b3;
/* 必须显式重写 transition，切断继承 */
transition: width 0.3s, opacity 0.2s;
}注意：transition-property: none; 实际上会让该元素**完全失去过渡能力**，连后续 JS 动态加的 transition 都可能被压制，慎用。
不同属性过渡时间不一致导致的视觉断裂
常见场景：按钮 hover 时同时变宽、变色、加阴影，但只给 width 设了 0.3s，box-shadow 和 background-color 没单独声明，结果后两者用默认 0s 瞬间跳变，看起来像卡顿。
立即学习“前端免费学习笔记（深入）”；
- 检查 DevTools 的 “Computed” 面板，看每个属性实际生效的
transition值 - 优先显式列出关键属性，例如：
transition: width 0.3s ease, background-color 0.2s ease-out, box-shadow 0.25s ease; - 避免混用
all和单属性声明——层叠顺序会导致后者被前者覆盖（all优先级更高）
transform + opacity 是性能最优组合
如果目标是流畅动画，优先用 transform（如 scale()、translateY()）和 opacity，它们能触发 GPU 加速；而 width、height、left、top 会触发 layout + paint，帧率容易掉。
.card {
transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
opacity 0.2s ease;
}
.card:hover {
transform: translateY(-4px) scale(1.02);
opacity: 0.95;
}浏览器对 transform 和 opacity 的过渡优化最成熟，即使同时控制 3–4 个这类属性，也不容易掉帧。其他属性叠加越多，越要警惕重排重绘开销。
