CSS悬停动画优化：解决鼠标移入时动画过渡不流畅问题

这问题我太熟悉了！你遇到的移入时动画生硬、移出却流畅的情况，根源在于你在:hover伪类里重写了transition属性，直接覆盖了基础样式里的transform过渡设置。

问题原因拆解 #

• 当鼠标移入.box时，.box:hover里的transition: background-color .6s ease会完全替代掉.box类里的transition: transform .6s，导致transform的缩放操作没有过渡效果，瞬间完成，看起来就很卡顿；
• 而鼠标移出时，元素回到.box的基础样式，transform的过渡设置重新生效，所以移出动画是流畅的。

修复方案 #

最简洁的解决方式是把所有需要过渡的属性都统一放在基础的.box类里，不要在:hover中单独重写transition：

.zoom { 
  display: flex; 
  justify-content: center; 
}
.zoom .box{ 
  padding: 16px; 
  /* 同时指定transform和background-color的过渡，统一控制时长和缓动 */
  transition: transform .6s, background-color .6s ease; 
}
.zoom .box:hover { 
  transform: scale(1.2); 
  background-color: #BD8A3B; 
  /* 这里不再单独写transition，继承基础类的过渡设置 */
}
.box { 
  width: 200px; 
  height: 600px; 
  background-color: #DACDBD; 
}

<section class="zoom">
  <div class="box">
    <span class="bold">Pwinw wjdnw wndi</span>
    <span class="number">5,5 % - 6,6%</span>
    <span class="light">dwjndwj dwjndw dw</span>
    <span class="bold">wdjwndk wdniwd knj</span>
  </div>
</section>

另一种可选写法（不推荐但可行） #

如果你一定要在:hover里设置transition，记得要把transform也包含进去，避免覆盖：

.zoom .box:hover { 
  transform: scale(1.2); 
  background-color: #BD8A3B; 
  transition: transform .6s, background-color .6s ease; 
}

这样修改后，不管鼠标移入还是移出，transform缩放和背景色变化都会平滑过渡，动画效果就一致啦！

内容的提问来源于stack exchange，提问作者Caciky