悬停时旋转字体awesome图标

Question

我正在尝试在鼠标悬停时旋转字体awesome刷新图标。

这是正常版本：
<i class="fa fa-refresh"></i> 这是旋转版本：
<i class="fa fa-refresh fa-spin"></i> 我希望只在鼠标悬停时旋转该图标。

这是失败的示例：fiddle

.fa-spin-hover:hover {
   -webkit-animation: spin 2s;
   -moz-animation: spin 2s;
   -o-animation: spin 2s;
   animation: spin 2s;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>

<i class="fa fa-refresh fa-2x fa-spin-hover"></i>

- Zack

Answer 1

使用以下 CSS 样式表。希望这能帮到你。

.fa.fa-refresh:hover {  
     transform: rotate(180deg);
}
.fa.fa-refresh {
     transition: transform 0.5s ease 0s;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>

<i class="fa fa-refresh fa-2x fa-spin-hover"></i>

更新的代码片段：http://jsfiddle.net/azim101/Xw7LH/177/

更新：

希望这能满足您的需求。

.fa.fa-refresh:hover {  
    -webkit-animation: infinite-spinning 1s ease-out 0s infinite normal;
    animation: infinite-spinning 1s ease-out 0s infinite normal;
}

@keyframes infinite-spinning {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-refresh fa-2x fa-spin-hover"></i>

- Ibrahim Khan

---

你能让它旋转得更快一些，并且在原始位置停止吗？ - Zack

请查看更新后的 .fa.fa-refresh:hover 的 CSS 属性 @Zack - Ibrahim Khan

Answer 2

您需要定义 fa-spin 关键帧。

CSS：

.fa-spin-hover:hover {
    animation: fa-spin 2s infinite linear;
}
// The animation bellow is taken from font-awesome.css
@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}
@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transfo rm:rotate(359deg);transform:rotate(359deg)}}

HTML

 <i class="fa fa-refresh fa-2x fa-spin-hover"></i>

Demo: http://jsfiddle.net/uevfyghr/1/

- Tony Dinh

---

好的。当鼠标悬停时，我该如何使其旋转而不中断（即使用户移开鼠标，它也应该完成旋转）？ - Zack

@Zack 如果没有JavaScript，这可能有点棘手，但是这里有一个解决方案：http://jsfiddle.net/95qrk3jq/ - Tony Dinh

它与以前不同，一旦悬停，它应该完成旋转，即使我将鼠标移开。 - Zack

恐怕您必须使用JavaScript来完成这个任务。 - Tony Dinh

看看这个：http://jsfiddle.net/bcqc8qzs/1/。匆忙完成，如有需要请随意改进。 - Tony Dinh

Answer 3

当鼠标未悬停时，您可以简单地禁用动画。

.fa-spin-hover:not(:hover) {
   animation: none;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>

<i class="fa fa-refresh fa-2x fa-spin fa-spin-hover"></i>

- Miguel Mota

---

这不是我要求的程序相关内容的翻译。 - Zack

请不要这样做，因为它会破坏 font-awesome 的 .fa-spin 默认行为。如果您在 CSS 代码中这样做，您的合作者将永远不知道为什么他们的旋转器没有旋转。 - Tony Dinh

@Zack 你当时问了什么？ - Miguel Mota

仅在悬停时旋转，不要反向旋转。 - Zack

Answer 4

为了使用CSS3的动画效果，你需要定义与动画起始和结束位置（旋转）相对应的动画关键帧。你可以在Mozilla开发者手册中了解更多信息。

在这种情况下，你希望起始关键帧在0度处（在CSS中为0deg，或者更一般地，为ndeg，其中n是以度为单位的旋转），而结束关键帧则可以是任意角度（例如，顺时针旋转1圈的360deg，顺时针旋转2圈的720deg等）。

在代码中，这可以翻译成：

.fa-spin-hover:hover {
   -webkit-animation: spin 2s;
   -moz-animation: spin 2s;
   -o-animation: spin 2s;
   animation: spin 2s;
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>

<i class="fa fa-refresh fa-2x fa-spin-hover"></i>

- The Obscure Question

---

好的。当用户将鼠标移开时，我该如何使其在悬停时旋转而不会中断（即使用户将鼠标移开，它也应该完成旋转）？ - Zack