按钮CSS Transition异常：鼠标移出时图标旋转无平滑过渡

嗨，我来帮你搞定这个图标过渡的小问题～你现在遇到的情况是：鼠标hover时图标能平滑转90度，但移出时瞬间复位，核心原因是你只给hover状态下的图标加了过渡属性，初始状态的图标没有设置过渡，所以移出时没有动画效果。

解决方案 #

把图标的transition属性移到它的默认状态样式里，这样不管是从0度转到90度，还是从90度转回0度，都会应用过渡动画。同时按钮本身的过渡可以保持，让整体样式变化更协调。

修改后的完整代码如下：

HTML

<a href="#" class="my-button">Click Me <i class='fas fa-arrow-right' ></i> </a>

CSS

.my-button {
  text-decoration: none;
  color: black;
  padding: .2rem;
  border: 2px solid black;
  transition: all 0.5s ease-in;
  
  &:hover {
    background-color: blue;
    color: white;
    border: 2px solid red;
  }
  
  // 把过渡属性移到默认状态的图标上，双向变化都生效
  .fas.fa-arrow-right {
    transition: transform 0.5s ease;
  }
  
  &:hover .fas.fa-arrow-right {
    transform: rotate(90deg);
    // 这里不需要再重复写transition了
  }
}

关键说明 #

• 原来的代码只在&:hover .fas.fa-arrow-right里加了transition，这意味着只有从初始状态到hover状态的变化会有过渡；
• 现在把transition: transform 0.5s ease加到图标默认样式中，这样hover状态回到初始状态的反向变化也会应用这个过渡动画，实现平滑复位；
• 按钮本身的transition: all 0.5s ease-in可以保留，确保按钮的背景、文字颜色、边框这些样式变化也有过渡效果。

这样调整后，鼠标移入移出按钮时，图标都会用0.5秒的时间完成旋转和复位，按钮样式也会同步平滑变化啦～

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