本文详解 CSS 中 transition 和 animation 属性因重复声明导致覆盖的问题，提供合并声明、合理使用选择器等专业解决方案，并附可运行示例代码与关键注意事项。
本文详解 css 中 `transition` 和 `animation` 属性因重复声明导致覆盖的问题，提供合并声明、合理使用选择器等专业解决方案，并附可运行示例代码与关键注意事项。
在 CSS 开发中，一个常见却容易被忽视的陷阱是：对同一 CSS 属性（如 transition 或 animation）在同一个选择器内多次声明时，后声明的会完全覆盖前声明的。这并非浏览器 Bug，而是 CSS 级联（Cascading）机制的固有行为——每个属性在单条规则中仅保留最后一个有效值。你的示例中，#sectionA 的 transition: width 0.5s; 被紧随其后的 transition: height 0.7s; 覆盖，最终只有高度变化具备过渡效果；同理，#sectionB 的 animation 在普通状态和 :hover 状态下均被单一声明覆盖，导致动画逻辑失效。
✅ 正确方案一：合并多个过渡/动画为单条声明
最简洁、推荐的做法是将多个过渡或动画声明合并为一条，用逗号分隔。每组「属性 + 持续时间 + 时序函数 + 延迟」构成独立子声明，互不干扰：
#sectionA {
width: 400px;
height: 400px;
background-color: #a55;
/* ✅ 正确：width 和 height 过渡同时生效 */
transition: width 0.5s ease, height 0.7s ease-out;
}
#sectionA:hover {
width: 200px;
height: 300px;
}
同样适用于 animation（需注意 animation-name 必须唯一，但可通过 animation-play-state 或 JS 动态控制）：
#sectionB {
width: 400px;
height: 400px;
background-color: #5a5;
/* 初始动画（可选）或设为 none */
animation: offHover 0.5s ease-in-out forwards;
}
#sectionB:hover {
/* ✅ 替换整个动画，而非叠加 —— 这是标准行为 */
animation: onHover 0.5s ease-in-out forwards;
}
@keyframes onHover {
from { width: 400px; height: 400px; }
to { width: 200px; height: 300px; }
}
@keyframes offHover {
from { width: 200px; height: 300px; }
to { width: 400px; height: 400px; }
}
? 关键提示：animation 不支持像 transition 那样在同一声明中混合多个动画（如 animation: a 1s, b 2s），但可通过 @keyframes 内定义复合关键帧实现多属性同步动画。
⚠️ 方案二（不推荐）：拆分选择器声明 —— 存在严重隐患
原答案中提出的“用不同选择器分别声明 transition”看似可行，实则违反 CSS 规范且不可靠：
/* ❌ 危险写法：CSS 解析器会合并同选择器的 transition 声明 */
#sectionA { transition: width 0.5s; }
#sectionA { transition: height 0.7s; } /* → 覆盖前者！ */
即使通过伪类或属性选择器“绕开”，也极易引发维护混乱与意外交互。现代 CSS 工程实践中应绝对避免此类技巧。
✅ 最佳实践总结
- 始终合并声明：transition: prop1 dur1 fn1, prop2 dur2 fn2, ...;
- 明确指定时序函数与延迟：避免依赖浏览器默认值（如 transition: all 0.3s 易引发性能问题）；
- 动画切换优先用 :hover + animation-name 替换，而非尝试叠加；
- 调试技巧：在开发者工具中检查 Computed 面板，确认 transition-property 是否包含预期属性；
- 进阶替代：对复杂交互动画，建议结合 @property（CSS Houdini）或 JavaScript + requestAnimationFrame 实现更精细控制。
遵循以上原则，即可彻底规避因声明覆盖导致的过渡/动画失效问题，构建稳定、可维护的视觉动效系统。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
