Question

正如问题所说，我想以一种方式旋转图标360度，反复旋转另一个图标。走向一个方向很容易，我不明白的是停下来走向另一个方向。

#loading {
    -webkit-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
from {
    -webkit-transform: rotate(0deg);
    }
to {
    -webkit-transform: rotate(359deg);
}
}

<i id="loading" class="material-icons">autorenew</i>

我尝试过另一个方向创建另一个旋转，但它似乎不适用。

@-webkit-keyframes rotationBackwards {
from {
    -webkit-transform: rotate(359deg);
    }
to {
    -webkit-transform: rotate(0deg);
}
}

Answer 1

转换不适用于内联元素。您必须将您的元素设置为块级元素（请参阅规范中的Transformable Elements - 如果包含Martial图标，则默认情况下将设置此元素。）

动画本身可以简单地完成，前半部分旋转360度（50％），后半部分旋转0度。请注意，动画的持续时间会分为两个方向（给定2s动画，每个方向都需要1秒）。

＆＃13;

#loading {
  display: inline-block;
  animation: rotation 2s infinite linear;
}

@keyframes rotation {
  50% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

＆＃13;

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i id="loading" class="material-icons">autorenew</i>

＆＃13;

Answer 2

通过简单地使用alternate animation-direction值并保留初始动画，这是另一个想法：

#loading {
  animation: rotation 2s infinite linear alternate;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i id="loading" class="material-icons">autorenew</i>

Css来回旋转元件360

2 个答案: