使用 CSS 和 Javascript 的无限旋转动画

Infinite rotation animation using CSS and Javascript

提问by Anuj Kaithwas

I was going thru some single page website examples and found this: http://alwayscreative.net/. I am totally amazed by the disc in the background that rotates infinitely. i have looked at some examples but none worked that way. Can anyone tell me how was that implemented. Thanks.

我正在浏览一些单页网站示例，发现了这个：http: //alwayscreative.net/。我对背景中无限旋转的圆盘感到非常惊讶。我看过一些例子，但没有一个是这样的。谁能告诉我这是如何实施的。谢谢。

回答by Roko C. Buljan

CSS3:

CSS3：

@keyframes rotate360 {
  to { transform: rotate(360deg); }
}
img { animation: 2s rotate360 infinite linear; }
/* TODO: Add -vendor-prefixes for different browsers */

<img src="//placehold.it/200x200/cfc?text=Wooo!" />

回答by Mohammad Ghaheri

This example makes infinite rotation very well:

这个例子很好地完成了无限旋转：

div{
    -moz-border-radius: 50px/50px;
    -webkit-border-radius: 50px 50px;
    border-radius: 80px/80px;;
    border:solid 21px #f00; 
    width:100px;
    height:100px;
    -webkit-animation: rotation 2s linear infinite;
    -moz-animation: rotation 2s linear infinite;
    -ms-animation: rotation 2s linear infinite;
}

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

You Can test it here: http://jsfiddle.net/HS68a/2/

你可以在这里测试：http: //jsfiddle.net/HS68a/2/

回答by MMK

please check this line. we can use css3 to rotate the image. and i will tested in chrome is working fine http://jsfiddle.net/sUHKh/

请检查这一行。我们可以使用 css3 来旋转图像。我将在 chrome 中测试工作正常 http://jsfiddle.net/sUHKh/

回答by Thony

Here is how it is implemented in your example :

以下是它在您的示例中的实现方式：

@-webkit-keyframes rotation1{
from{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}
@-moz-keyframes rotation1{
from{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}
@-o-keyframes rotation1{
from{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg)}
to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}

.vector1{-moz-animation:rotation1 30s linear infinite;-o-animation:rotation1 30s linear infinite;-webkit-animation:rotation1 30s linear infinite;animation:rotation1 30s linear infinite}

But I don't see any interest (I would dare say it seem a bit strange...)in putting browser prefixed transform in an other browser specific keyframes.

但是我没有看到任何兴趣（我敢说这看起来有点奇怪......）将浏览器前缀转换放在其他浏览器特定的关键帧中。

It also lack a generic keyframes and IE10 support so this is how I implemented it :

它还缺乏通用关键帧和 IE10 支持，所以我是这样实现的：

@-webkit-keyframes rotation1{
  from{-webkit-transform:rotate(0deg);}
  to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes rotation1{
  from{-moz-transform:rotate(0deg);}
  to{-moz-transform:rotate(360deg);}
}
@-o-keyframes rotation1{
  from{-o-transform:rotate(0deg);}
  to{-o-transform:rotate(360deg);}
}
@keyframes rotation1{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
  }
.vector1{-moz-animation:rotation1 30s linear infinite;-o-animation:rotation1 30s linear infinite;-webkit-animation:rotation1 30s linear infinite;animation:rotation1 30s linear infinite}

回答by Phil

I just did an "inspect element" in Chrome. Here's the CSS.

我刚刚在 Chrome 中做了一个“检查元素”。这是CSS。

.vector1 {
  -moz-animation: rotation1 30s linear infinite;
  -o-animation: rotation1 30s linear infinite;
  -webkit-animation: rotation1 30s linear infinite;
  animation: rotation1 30s linear infinite;
}