transition必须写在常态选择器中而非:hover里，否则移出时无过渡；需显式声明所有参与过渡属性的初始值，避免inherit/unset；背景色过渡禁用background简写；位移动画应使用transform替代top/left以提升性能。
transition写在:hover里，移出时根本不会触发
浏览器只在属性“开始变化”时检查transition声明。如果transition只写在:hover规则里，那它只在鼠标移入时才被读取——移出时，元素已脱离:hover状态，那条规则失效，浏览器直接按默认行为跳回原始样式，没有过渡可言。
这不是兼容性问题，是CSS过渡机制本身的限制：过渡必须由“起始态”定义，而起始态就是非:hover的常态。
- ✅ 正确位置：
.btn { transition: background-color 0.25s ease; } - ❌ 错误位置：
.btn:hover { transition: background-color 0.25s ease; }（移出即失效） - 移出动画不是“额外加的”，而是同一组
transition自动反向插值的结果
初始值没写全，移出时找不到“回去的路”
即使transition写对了位置，如果某个参与过渡的属性在常态下没显式声明值（比如靠继承、默认值或unset渲染），浏览器就无法确定“该从哪开始插值”，移出时就会跳变。
例如opacity默认是1，但不写出来，移出时可能从当前计算值直接崩回1（中间无缓动）；又比如用color: inherit，移出时浏览器不知道该过渡回父级哪个具体色值。
立即学习“前端免费学习笔记（深入）”；
- 务必手动写死所有参与过渡的属性初始值：
color: #333、background-color: #f0f0f0、transform: scale(1)、opacity: 1 - 避免
inherit、unset、initial出现在过渡链中 - 不确定默认值？打开 DevTools → Computed 标签页，看实际计算值，然后照抄到 CSS 里
用了background简写，悄悄覆盖了background-color过渡
background是简写属性，一旦在:hover里写background: #007bff url(logo.png)，它会重置整个背景层，包括background-color、background-image、background-position等。即使常态写了transition: background-color 0.25s，这个简写也会让background-color的变更被吞掉，导致颜色变化不平滑甚至完全失效。
- 只用
background-color做颜色过渡，:hover里也只改background-color - 若需图片+颜色混合效果，用伪元素
::before叠一层带透明度的渐变，主层保持纯色过渡 - 绝对不要在
:hover里用background简写替代单个背景属性
left/top位移 + transition 导致卡顿，不是过渡问题而是性能问题
用top: -10px配合transition看似能实现上浮，但top触发布局（Layout）和绘制（Paint），每帧都要重新计算文档流，帧率容易掉，看起来就是“抖”或“慢半拍”。这不是transition没生效，而是浏览器忙不过来。
- 改用
transform: translateY(-10px)，它只走合成层，GPU 加速，顺滑得多 - 确保
transition写在常态里，且明确写transition: transform 0.3s ease（不能漏掉transform） - 给元素加
transform: translateZ(0)或will-change: transform可进一步提示浏览器启用硬件加速（慎用will-change，仅对高频动画元素）
opacity: 1，或者transform没设默认scale(1)，结果移出时浏览器只能硬切，毫无缓冲余地。 
