为什么CSS transition写在hover里移出时不平滑？-css教程-PHP中文网

transition必须写在常态选择器中而非:hover里，否则移出时无过渡；需显式声明所有参与过渡属性的初始值，避免inherit/unset；背景色过渡禁用background简写；位移动画应使用transform替代top/left以提升性能。

为什么css transition写在hover里移出时不平滑？

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，移出时浏览器不知道该过渡回父级哪个具体色值。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

务必手动写死所有参与过渡的属性初始值：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)，结果移出时浏览器只能硬切，毫无缓冲余地。