CSS hover时应用transition ease-in，移出时ease-out效果未生效的问题

我来帮你搞定这个过渡异常的问题！

问题根源 #

你当前的代码中，在:hover状态下重新定义了transition属性，这会直接覆盖初始状态的过渡规则。当鼠标悬停时，元素会使用transition:all 0.5s ease-in；但鼠标移出时，浏览器在切换回初始样式的过程中，会因为属性覆盖的逻辑冲突，无法正确触发初始状态的ease-out过渡，导致移出时的动画异常。

另外你的HTML里还有个小细节：<div class=" span-style">的class属性前多了一个空格，这可能导致样式无法正确绑定到元素上，建议修正这个小失误。

修复方案 #

我们可以通过明确指定过渡属性，分别控制悬停进入和移出的过渡效果，避免all关键字带来的属性覆盖问题：

.span-style{ 
  font-size: 1.2em; 
  /* 定义鼠标移出时的过渡：针对border属性，1秒ease-out曲线 */
  transition: border-left 1s ease-out, border-right 1s ease-out; 
}
.span-style:hover{ 
  border-left:4px solid; 
  border-right:4px solid; 
  /* 定义鼠标悬停时的过渡：针对border属性，0.5秒ease-in曲线 */
  transition: border-left 0.5s ease-in, border-right 0.5s ease-in; 
}

<div class="span-style"> 
  <span class="span-style__1"> Duration</span> 
  <span class="span-style__2"> 40 Days</span> 
</div>

原理说明 #

• 当鼠标悬停时，元素触发:hover样式，此时使用hover中定义的ease-in过渡曲线，0.5秒内完成边框的显示动画。
• 当鼠标移出时，元素回到初始样式，此时应用初始类中定义的ease-out过渡曲线，1秒内完成边框的隐藏动画。
• 明确指定border-left和border-right作为过渡属性，既避免了all关键字可能带来的不必要属性过渡，也彻底解决了过渡规则互相覆盖的问题。

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