使用 css 来回旋转图标

Question

我正在尝试连续来回旋转图标。我已经能够将其从 -45 度旋转到 90 度，现在我希望它以相反的方向返回。但它再次从 -45 度开始到 90 度。因此，旋转的经验似乎被打破了。这是我的代码：

.HTML

<div class="searchColDiv">
<i class="fa fa-search searchIcon rotating"  style="font-size: 100px;" aria-hidden="true"></i>
</div>

.CSS

.searchColDiv{
text-align: center;
}
@-webkit-keyframes rotating {
from {
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
to {
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
}
.rotating {
-webkit-animation: rotating 2s linear infinite;
-moz-animation: rotating 2s linear infinite;
-ms-animation: rotating 2s linear infinite;
-o-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;
}

这是我的代码jsFiddle链接：

js小提琴

Answer 1

你可以使用无限的"替代"值。

让它来回移动

。通过将动画方向设置为交替可以轻松实现

animation: rotating 2s linear infinite alternate;

https://jsfiddle.net/78kt1p5j/1/