CSS3旋转动画

我已经看过很多演示，不知道为什么我不能让CSS3自旋正常工作。我使用的是最新稳定的Chrome版本

小提琴：

div{
利润率：20px；
宽度：100px；
高度：100px；
背景：#f00；
-webkit动画名称：spin；
-webkit动画持续时间：40000ms；
-webkit动画迭代计数：无限；
-webkit动画计时功能：线性；
-moz动画名称：spin；
-moz动画持续时间：40000ms；
-moz动画迭代次数：无限；
-moz动画计时功能：线性；
-ms动画名称：旋转；
-ms动画持续时间：40000ms；
-ms动画迭代次数：无限；
-ms动画计时功能：线性；
-o型过渡：旋转（3600度）；
}

---

您尚未指定任何关键帧

你可以用这个做很多很酷的事情

：）

---

N.B.如果使用，您可以不用写出所有前缀。

要旋转，可以使用关键帧和变换

div {
    margin: 20px;
    width: 100px; 
    height: 100px;    
    background: #f00;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 40000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 40000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 40000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
}

@-webkit-keyframes spin {
  from {
    -webkit-transform:rotate(0deg);
  }

  to {
    -webkit-transform:rotate(360deg);
  }
}

---

要使用CSS3动画，还必须定义实际的动画关键帧（您将其命名为

spin

）

阅读更多信息

配置动画计时后，需要定义动画的外观。这是通过使用at规则建立两个或多个关键帧来实现的。每个关键帧描述动画元素在动画序列中给定时间的渲染方式

---

演示：

div{
利润率：20px；
宽度：100px；
高度：100px；
背景：#f00；
-webkit动画名称：spin；
-webkit动画持续时间：4000ms；
-webkit动画迭代计数：无限；
-webkit动画计时功能：线性；
-moz动画名称：spin；
-moz动画持续时间：4000ms；
-moz动画迭代次数：无限；
-moz动画计时功能：线性；
-ms动画名称：旋转；
-ms动画持续时间：4000ms；
-ms动画迭代次数：无限；
-ms动画计时功能：线性；
动画名称：旋转；
动画持续时间：4000ms；
动画迭代次数：无限；
动画计时功能：线性；
}
@-ms关键帧旋转{
从{-ms变换：旋转（0度）；}
到{-ms变换：旋转（360度）；}
}
@-moz关键帧旋转{
从{moz变换：旋转（0度）；}
到{moz变换：旋转（360度）；}
}
@-webkit关键帧旋转{
从{-webkit变换：旋转（0度）；}
到{-webkit变换：旋转（360度）；}
}
@关键帧旋转{
从{
变换：旋转（0度）；
}
到{
变换：旋转（360度）；
}
}

---

从最新的Chrome/FF开始，在IE11上不需要-ms/-moz/-webkit前缀。 下面是一个较短的代码（基于前面的答案）：

---

现场演示：

为了完整起见，这里有一个Sass/Compass示例，它确实缩短了代码，编译后的CSS将包括必要的前缀等

div
  margin: 20px
  width: 100px 
  height: 100px    
  background: #f00
  +animation(spin 40000ms infinite linear)

+keyframes(spin)
  from
    +transform(rotate(0deg))
  to
    +transform(rotate(360deg))

---

带有字体图标的HTML

<span class="fa fa-spinner spin"></span>

---

这将使您能够回答问题

唯一给出正确359度的答案：

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(359deg); }
}

&.active {
  animation: spin 1s linear infinite;
}

这里有一个有用的梯度，你可以证明它在旋转（如果它是一个圆）：

---

对于那些仍然在搜索一些酷而简单的spinner的人，我们在fontawesome网站上提供了多个spinner示例：

---

您只需使用调试器检查所需的微调器并复制css样式。

您就可以获得✓ 因为你解释得最好，而且你是唯一一个包含所有前缀版本的答案。这非常挑剔，但你真的应该将其动画设置为359度。360度和0度在径向上是相同的，所以动画会在整圈时短暂暂停。@AdamGrant谢谢，今天，这几乎让我头疼，因为你想将动画设置为359.99999999度，而不是359度。旋转度是一个连续的旋转范围[0，360）如果旋转到359.0，当旋转从359扭曲到0时，在每次旋转的开始处都会有一个1度的记号。为了澄清所有这些给出错误信息的评论…所选答案是正确的，没有修改。0和360度在浏览器眼中实际上是不同的，但仍然是相同的点。F或者，如果尝试将其从0度旋转到0度（或从360度旋转到360度），则为示例，它根本不会旋转。将其从0度旋转到360度会告诉浏览器在完成动画之前将对象旋转360度。设置

动画迭代计数：无限；

，动画中将有无限帧。即使是20分钟的旋转也会看起来完美平滑。您还可以获得我对添加def的赞成票.spin的初始化将动画规则与速记结合起来

动画：spin 4s linear infinite

。这似乎只是重复。

<span class="fa fa-spinner spin"></span>

@-moz-keyframes spin {
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    to {transform:rotate(360deg);}
}

.spin {
    animation: spin 1000ms linear infinite;
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(359deg); }
}

&.active {
  animation: spin 1s linear infinite;
}

background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);