165

我已经查看了很多演示，但不知道为什么我不能让 CSS3 spin 发挥作用。我正在使用 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>

4

9 回答 9

323

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

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

配置动画的时间后，您需要定义动画的外观。这是通过使用@keyframesat 规则建立两个或更多关键帧来完成的。每个关键帧都描述了动画元素在动画序列期间的给定时间应如何渲染。

演示：

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);}
}
于 2013-02-13T17:38:07.697 回答
31

您尚未指定任何关键帧。我让它在这里工作。

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，您可以跳过必须写出所有前缀。

于 2013-02-13T17:35:20.440 回答
18

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

于 2015-07-30T09:56:58.987 回答
13

带有字体真棒字形的 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;
}
于 2017-06-05T15:00:58.027 回答
6

给出正确 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%);
于 2019-08-28T06:39:04.603 回答
4

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

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

例子

于 2013-02-13T17:37:31.723 回答
4

为了完整起见，这里有一个真正缩短代码的 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))
于 2015-12-03T08:02:07.790 回答
0 
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

这会让你回答这个问题

于 2018-11-01T07:55:22.320 回答
0

对于仍在搜索一些很酷且简单的微调器的人，我们在 fontawesome 网站上有多个微调器示例：https ://fontawesome.com/v4.7.0/examples/

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

于 2021-01-20T15:11:31.853 回答