CSS3旋转动画

我已经审查了相当多的演示，不知道为什么我不能让 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>

400206 次浏览
小开

您还没有指定任何关键帧。

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

你实际上可以用它做很多很酷的事情。

:)

如果你使用 没有前缀，你可以跳过写出所有前缀的步骤。

小开

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

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)

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

一旦配置了动画的计时，就需要定义动画的外观。这是通过使用 @keyframes at-rule 建立两个或多个关键帧来完成的。每个关键帧描述动画元素在动画序列期间的给定时间应该如何呈现。

演示:

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

在最新的 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/

小开

为了便于完成，这里有一个 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>

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;
}
小开 
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}

这会让你回答这个问题

小开

给出正确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%);
小开

对于那些仍然搜索一些很酷和容易的微调器的家伙，我们有多个例子的微调器在字体很棒的网站: https://fontawesome.com/v4.7.0/examples/

你只需要用你的调试器检查你想要的微调器，然后复制 css 样式。


提交答案