transition 和 animation 不能同时控制同一属性，因为 animation 的输出值优先级高于 transition 插值结果，且 animation-fill-mode: forwards 会锁定最终值，使 transition 缺失起始值。
transition 和 animation 为什么不能同时控制同一属性
因为 CSS 动画（animation）对声明的属性拥有强制接管权，一旦开始播放，就会覆盖 transition 对该属性的控制。这不是 bug，而是规范行为：浏览器在计算样式时，animation 的输出值优先级高于 transition 插值结果。
常见错误现象包括：hover 时 transform 突然跳变、transition 完全不触发、或只在动画结束后才“补一帧”过渡。
-
animation按时间轴逐帧写入属性值，无视外部变化；transition只响应“属性值被 JS 或 class 切换修改”这一瞬间 - 即使
animation已结束，若设置了animation-fill-mode: forwards，它仍会锁定最终值，导致后续transition无“起始值”可读 - 两个规则写在同一选择器里（如
.box { transition: opacity 0.3s; animation: fade 1s; }），opacity就会被fade动画完全接管
如何判断是不是 fill-mode 导致的 transition 失效
当元素在动画结束后无法响应 hover 或 class 切换的过渡效果，大概率是 animation-fill-mode 锁住了属性值。尤其注意 forwards 和 both 这两个值。
检查方式很简单：打开浏览器开发者工具 → 找到该元素 → 在 Styles 面板中查看 computed 样式里的对应属性（如 transform 或 right）→ 如果显示值来自 @keyframes 且与动画最后一帧一致，而你又没手动改回初始值，那 transition 就注定失效。
- 临时修复：把
animation-fill-mode改成none，观察transition是否恢复 - 长期方案：动画结束后用
animationend事件清除内联style.animation，或切换 class 移除动画声明 - 不要依赖
all：写transition: all 0.3s会把所有被animation控制过的属性都纳入“待过渡”，但它们实际没有起始值，等于白写
同一元素上让 transition 和 animation 协同工作的实操条件
能共存，但必须满足物理隔离：不同属性、不同时段、不共享控制权。
比如你想让一个按钮加载时旋转（animation），悬停时上浮并变色（transition），就得明确分工：
- 旋转交给
transform: rotate()+@keyframes spin，悬停时停掉这个动画（用 JS 或 class 切换） - 上浮用
transform: translateY()，但必须确保旋转动画已移除，否则两个transform值会冲突（浏览器只取最后一个） - 变色用
background-color，这个属性通常不被动画占用，transition可直接生效 - 如果非要用同一个属性（如都用
transform），就把交互逻辑全收进@keyframes，用 JS 触发不同动画名，彻底弃用transition
多个 transition 声明为什么会“只生效最后一个”
这是 CSS 层叠机制决定的：同一规则块中重复声明简写属性（如 transition），后出现的会完全覆盖前面的，而不是合并。
例如这段代码：
.card {
transition: width 0.4s;
transition: height 0.6s ease-in;
}
实际只有 height 过渡生效，width 被丢弃。这不是浏览器差异，所有现代引擎都如此。
- 正确写法是用逗号合并：
transition: width 0.4s, height 0.6s ease-in; - 合并后还能为每个属性单独设缓动函数、延迟（如
opacity 0.3s ease-out 0.1s） - 避免用
transition: all—— 它会让不可过渡的属性（如display、z-index）静默失败，还可能意外覆盖本该由animation控制的属性
真正麻烦的从来不是语法怎么写，而是谁在什么时候实际控制了哪个属性。只要盯着 computed styles 里的实时值，再对照 animation-fill-mode 和 transition 的声明时机，大部分“失效”都能立刻定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
