动画不回退是因为transition只写在:hover中，常态无定义导致离开时无过渡；应统一声明在基础选择器中，明确列出需动画的属性而非用all。
transition 写在 :hover 里为什么动画不回退？
因为只在 :hover 规则中定义了 transition，离开时浏览器找不到过渡依据，直接跳变回原始样式。CSS 过渡必须作用于「状态变化的起点和终点都存在的属性」，而起点（常态）没声明 transition，就等于告诉浏览器：“这个变化不用过渡”。
常见表现：:hover 进入有动画，鼠标移开瞬间“啪”一下弹回去；或者多个伪类（如 :focus、:active）各自写 transition，导致不同状态间切换时过渡参数不一致、冲突。
- 始终把
transition声明在元素的默认状态（即非伪类的基础选择器）中 - 避免在
:hover、:focus、:active等伪类里重复写transition - 如果需要某状态禁用过渡（比如点击瞬间不想动），可用
transition: none覆盖，但前提是基础层已有定义
哪些 transition 属性该统一写？优先级怎么排？
统一定义不是只写一行 transition: all 0.3s ease —— 那会把所有可动画属性都卷进来，容易引发意外动画（比如 height 意外展开、box-shadow 在不该动的时候闪一下）。真正要收口的是「你实际想控制的那几个属性」。
推荐按粒度从紧到松排列：
立即学习“前端免费学习笔记（深入）”；
-
transition: background-color 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);—— 明确列出关键属性，性能好、可控性强 -
transition: color 0.15s, border-color 0.15s, opacity 0.2s;—— 多个轻量属性分写，便于单独调试 - 避免
transition: all 0.3s;，除非是原型阶段快速验证 - 不要混用
transition-property: all和具体属性名，会导致浏览器行为不一致（尤其 Safari）
JavaScript 动态加 class 时 transition 失效？
典型现象：JS 给元素加了 is-active 类，但没动画；或动画只触发一次，之后再切就没反应。根本原因是浏览器没“感知到样式变化起点”—— 它以为新旧状态之间没有过渡定义，因为 class 切换前后，transition 的声明位置或值发生了断裂。
解决方式很直接：
- 确保基础选择器（如
.btn）已声明完整的transition，且不被 JS 注入的 style 或更高优先级规则覆盖 - 如果 JS 需要临时禁用过渡（例如初始化时跳过动画），改用
element.style.transition = 'none'，操作完立刻恢复，而不是删 class 或改属性 - 强制重排触发过渡：在修改 class 后读取一次
offsetHeight，让浏览器同步计算当前样式，再应用目标状态（但应尽量避免，属于 hack）
.btn {
background-color: #ccc;
transition: background-color 0.2s ease, transform 0.25s ease;
}
.btn.is-active {
background-color: #007bff;
transform: scale(1.05);
}
多状态共存时（比如 hover + focus + disabled），transition 还能稳住吗？
能，但前提是所有状态变更都落在同一套 transition 定义下。CSS 会自动匹配「起始值 → 目标值」之间的插值路径，只要属性可动画、且 transition 声明稳定，浏览器就自己算。
容易翻车的点：
-
disabled状态常通过opacity+pointer-events实现，但pointer-events不可动画，别把它塞进transition-property - 多个伪类叠加（如
.btn:hover:focus）时，确保它们修改的属性不互相覆盖「可动画性」，比如一个设transform: scale(1.1)，另一个又设transform: rotate(5deg)，后者会完全取代前者，过渡变成「scale(1) → rotate(5deg)」，中间丢失缩放 - 用
will-change提前提示动画属性可提升性能，但别滥用（如will-change: transform是安全的，will-change: all是反模式）
过渡混乱的本质，不是状态太多，而是 transition 的控制权分散了。把它钉死在基础选择器里，后面所有状态都是它的子集，自然就稳了。
