按钮 CSS 转换不正常

Button CSS Transition not working properly

我有一个按钮,上面有一些文字和一个很棒的字体图标,可以在 0.5 秒内旋转 90 度,悬停时会改变颜色。我想要完成的是,当用户取消悬停按钮时,它应该需要 0.5 秒才能从 90 度旋转回到 0 度,而不是立即旋转。我想要一个平滑的过渡回到原始状态,而不是在悬停时立即。

Codepen

<a href="#" class="my-button">Click Me <i class='fas fa-arrow-right' ></i> </a>
.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;
    }

    &:hover .fas.fa-arrow-right {
        transform: rotate(90deg);
        transition: transform 0.5s ease 0s;
    }
}

你没有指定目标 i:

试试这个

.my-button {
  text-decoration: none;
 color: black;
 padding: .2rem;
 border: 2px solid black;
 transition: all 0.5s ease-in-out;
  
  & i{
    transition: all 0.5s ease-in-out;
  }

 &:hover {
  background-color: blue;
  color: white;
  border: 2px solid red;
 }

 &:hover .fas.fa-arrow-right {
  transform: rotate(90deg);
 }
}