CSS3旋转动画

Question

我已经查看了很多演示并且不知道为什么CSS3旋转无法运行。我正在使用最新的Chrome稳定版本。

代码片段： http://jsfiddle.net/9Ryvs/1/

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;
  -o-transition: rotate(3600deg);
}

<div></div>

- iambriansreed

Answer 1

要使用CSS3动画，您还必须定义实际的动画关键帧（这些关键帧被命名为spin）。

阅读 https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations 获取更多信息。

一旦配置了动画的时间，您需要使用 @keyframes at-rule 建立两个或两个以上的关键帧。每个关键帧描述了动画序列中某个特定时间内动画元素的显示方式。

---

Demo:

div {
    margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-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);
    }
}

<div></div>

@-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);}
}

- Gabriele Petrioli

---

你获得了 ✓，因为你解释得最好，而且是唯一一个包含所有前缀版本的答案。 - iambriansreed

这有点挑剔，但你应该让它动画化到359度。360度和0度在径向上是相同的，因此动画会在完整的旋转时短暂地停顿一下。 - Adam Grant

@AdamGrant 谢谢，这几乎让我今天头疼了，哈哈。 - mattslone

你想要动画旋转到359.9999999999度，而不是359度。旋转度数是一个连续的范围[0, 360)，如果你旋转到了359.0度，每次旋转从359度转到0度时都会出现一个1度的刻度。 - mdonoughe

为了澄清那些提供错误信息的评论......选定的答案是正确的，没有修改。在浏览器的视角下，0度和360度实际上是不同的，但仍然是同一个点。例如，如果您尝试将其从0度旋转到0度（或从360度旋转到360度），它将不会旋转。将其从0度旋转到360度告诉浏览器在完成动画之前将对象完全旋转360度。设置 animation-iteration-count: infinite; 您将获得无限的动画帧。即使旋转20分钟，也看起来非常流畅、无瑕疵。 - jacurtis

Answer 2

您没有指定任何关键帧。 我在这里让它工作了。

div {
    margin: 20px;
    width: 100px; 
    height: 100px;    
    background: #f00;
    -webkit-animation: spin 4s infinite linear;
}

@-webkit-keyframes spin {
    0%  {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}   
}

使用它，您实际上可以做很多非常酷的事情。 这是我之前制作的一个示例。

:)

注：如果使用-prefix-free，则可以跳过编写所有前缀的步骤。

- Jezen Thomas

Answer 3

最新版的Chrome/FF以及IE11不再需要前缀- ms/-moz/-webkit。以下是一个更简短的代码（基于先前的答案）：

在最新的Chrome / FF和IE11上，无需使用-ms / -moz / -webkit前缀。

这里有一个更简短的代码（基于之前的答案）：

div {
    margin: 20px;
    width: 100px;
    height: 100px;
    background: #f00;

    /* The animation part: */
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

实时演示：http://jsfiddle.net/9Ryvs/3057/

- oriadam

---

将动画规则与缩写animation: spin 4s linear infinite结合起来。 - vhs

Answer 4

使用font-awesome glyphicon的HTML。

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

CSS

@-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;
}

- pearpages

---

你因为添加了 ".spin" 的定义，也获得了我的点赞。 - Blair Connolly

Answer 5

唯一正确的359度答案是：

@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%);

- danday74

Answer 6

要进行旋转，您可以使用关键帧和变换。

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);
  }
}

Example

- user2985029

Answer 7

为了完整起见，这里有一个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))

- miphe

Answer 8

对于那些仍在寻找一些酷炫且易用的旋转器的人，我们在fontawesome网站上有多个旋转器示例：https://fontawesome.com/v4.7.0/examples/

您只需使用调试器检查所需的旋转器并复制CSS样式即可。

- Foxlab

Answer 9

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

这将使您回答问题

- sudarshan

---

这似乎只是 这个现有答案 的重复。 - Pang