本文详解 css 中多个 transition 和 animation 无法同时生效的根本原因（同选择器内重复声明被覆盖），并提供两种可靠解决方案：合并声明法与分层选择器法，附可运行示例与关键注意事项。
本文详解 css 中多个 transition 和 animation 无法同时生效的根本原因（同选择器内重复声明被覆盖），并提供两种可靠解决方案：合并声明法与分层选择器法，附可运行示例与关键注意事项。
在 CSS 开发中，一个常见却易被忽视的陷阱是：在同一 CSS 规则块中多次声明同一简写属性（如 transition 或 animation）时，后声明的会完全覆盖前声明的。这并非浏览器 Bug，而是 CSS 层叠（Cascading）机制的正常行为——每个属性在单条规则中仅保留最后一个有效值。因此，像 transition: width 0.5s; transition: height 0.7s; 这样的写法，实际生效的只有后者，导致 width 的过渡完全失效。
✅ 正确方案一：合并多个过渡/动画声明（推荐）
最简洁、高效且符合规范的做法是将多个过渡效果合并为一条 transition 声明，用英文逗号分隔：
#sectionA {
width: 400px;
height: 400px;
background-color: #a55;
/* ✅ 正确：单条声明，多属性过渡并行生效 */
transition: width 0.5s ease, height 0.7s cubic-bezier(0.2, 0.8, 0.4, 1);
}
#sectionA:hover {
width: 200px;
height: 300px;
}
同样适用于 animation（当需同时触发动画时）：
#sectionB {
width: 400px;
height: 400px;
background-color: #5a5;
/* ✅ 支持多动画并行（需不同动画名） */
animation: offHover 0.5s ease-in-out forwards;
}
#sectionB:hover {
/* ✅ hover 时可切换/叠加多个动画（注意：同名动画仍会覆盖） */
animation: onHover 0.5s ease-in-out forwards,
pulse 1s infinite alternate;
}
@keyframes pulse { from { opacity: 0.8; } to { opacity: 1; } }
? 提示：transition 合并写法支持为不同属性指定独立持续时间、缓动函数甚至延迟（如 transition: width 0.3s, opacity 0.6s ease-out 0.2s），灵活性极强。
⚠️ 方案二：通过选择器分离（不推荐，仅作理解参考）
虽然技术上可行，但以下写法存在严重缺陷，不建议在生产环境使用：
/* ❌ 反模式：语义混乱、维护困难、触发不可靠 */
#sectionA { transition: width 0.5s; }
#sectionA:hover { width: 200px; }
#sectionA { transition: height 0.7s; } /* 覆盖了上面的 transition 声明！ */
#sectionA:hover { height: 300px; }
该写法看似“分开了”，实则因两次 #sectionA 规则处于同一权重层级，后出现的 transition 会覆盖前一个，最终仅 height 过渡生效；且违反 CSS 可读性与可维护性原则。
? 关键注意事项
- transition 是简写属性：transition: all 0.3s、transition-property、transition-duration 等子属性若单独设置，也需确保不被后续同名声明覆盖；
- 动画名唯一性：animation 属性中若重复使用同一动画名（如 animation: slide 0.5s, slide 0.3s），后者会覆盖前者；需用不同名称实现叠加；
- 性能敏感属性慎用：避免对 top/left 或未启用硬件加速的属性（如 width/height）做高频过渡；优先使用 transform + opacity 组合；
- 调试技巧：在开发者工具中检查元素的“Computed”面板，确认 transition 或 animation 计算值是否为你预期的完整字符串。
掌握声明合并这一核心技巧，不仅能彻底解决覆盖问题，更能写出更精简、高性能、易维护的 CSS 动效代码。记住：CSS 中没有“追加”，只有“覆盖”；而合并，就是优雅的解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
