旋转字体真棒图标

Question

所以我们有这个按钮：

<button type="button" class="btn"> 
 <a href="#">This goes somewhere</a>
 <i class="fa fas-arrow-right"></i>
</button>

我想将图标旋转 90 度，因此悬停时它会是一个向下箭头，我遇到的问题是：

- 当使用 css 悬停和旋转时，问题是你必须悬停图标，我希望箭头在悬停按钮时旋转 90 度，我不知道你是否可以在悬停按钮时使悬停发生在图标上，甚至因此，当悬停图标时，它会旋转 90 度，然后又回到初始位置，我希望它在您悬停按钮时保持不变。

我已经尝试过使用 javascript，它可以很好地使用 mouseover 和 mouseout 添加和删除一个带有 tranform 旋转 90deg 的类，但问题是我无法弄清楚如何使动画发生得更快，使用 javascript 它发生得非常慢，什么我的意思是，在悬停时，按钮会改变颜色，颜色也会改变，但箭头仅在 2-3 秒后才会下降。

所以我的问题是你能用 javascript 控制动画速度吗？ 您可以在悬停按钮时使用 css 来做到这一点，并使其保持在 90 度，并且在悬停后才返回初始位置吗？

Answer 1

您可以使用

.btn:hover > i {
 display: inline-block;
 transition: 1.5s ease-in-out;
 transform: rotate(180deg);
} 

如果您希望 i 标签旋转，则需要显示 inline-block。 我也可能建议使用 span 标签而不是 i 标签作为字体真棒图标，因为 span 的语义含义较少，其中 i 标签保留为斜体。 如果需要，您也可以通过编辑转换代码来编辑速度和更改动画类型。

Answer 2

你不需要 Javascript 来实现这一点。 使用:hover选择器，您可以在用户悬停按钮时应用 css 属性。 您可以在 transition 属性上设置改变 ms/s 的速度。

.btn:hover i {
   transition: all 300ms;
   transform: rotate(90deg);
}