旋转字体很棒的图标

Question

所以我们有这个按钮：

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

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

-When使用css悬停和旋转的问题是，你必须悬停图标，我想箭头旋转90度时，悬停的按钮，我不知道你是否可以使悬停发生在图标上时，悬停的按钮，即使这样，当悬停的图标，它旋转到90度，但然后回到初始位置，我想它留下来，只要你悬停的按钮。

我试过使用javascript，它可以很好地使用mouseover和mouseout来添加和删除一个带变换旋转90度的类，但问题是我不能想出如何让动画发生得更快，用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);
}