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>

Answer 1

要使用CSS3动画,您还必须定义实际的动画关键帧(您命名spin)

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

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

演示http://jsfiddle.net/gaby/9Ryvs/7/

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

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,则可以跳过必须写出所有前缀.

Answer 3

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

Answer 4

带有字体令人敬畏的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;
}

Answer 5

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

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