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

我在浏览一些单页网站示例时发现了以下内容：。我完全惊讶于背景中旋转无限的圆盘。我看过一些例子，但没有一个是这样的。谁能告诉我这是如何实现的。 谢谢。

我刚刚用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;
}

---

CSS3:

@关键帧旋转360{
到{变换：旋转（360度）；}
}
img{动画：2s旋转360无限线性；}
/*TODO:添加-不同浏览器的供应商前缀*/

---

请检查此行。我们可以使用css3旋转图像。我会在chrome上测试，一切正常

---

以下是如何在您的示例中实现它：

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

但我看不出有任何兴趣（我敢说这似乎有点奇怪…）将浏览器前缀转换放在其他浏览器特定的关键帧中

它还缺少通用关键帧和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}

---

这个例子很好地实现了无限旋转：

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

---

您可以在此处进行测试：

-browserSpecificSyntax动画：30s线性0s正常无无限旋转1

@Ohgodwhy:我没有在我的网页中使用任何其他图像。@Anuj Kaithwas以及duh…这是因为

rotation1

是一个预定义的CSS键…

@-webkit关键帧旋转1{/*行220，../sass/screen.scss*/来自{-webkit transform:rotate（0deg）；-moz transform:rotate（0deg）；-ms transform:rotate（0deg）；-o变换：旋转（0度）；变换：旋转（0度）；}

是的，我在firebug上这样做了，但它不会旋转我在网页中使用的任何图像。你有任何可以显示的代码吗？你还需要添加

关键帧

规则使其工作。没有理由在jQuery 1.8中使用基于浏览器的选择器作为前缀。@Roko:嘿，我知道它很蹩脚，你能帮我解决一个JS问题吗：D，我已经发布了这是很久以前的事了，但它还没有解决，也许你可以给我你的电子邮件id或fb id…@Roko让我们改变循环的持续时间？请在答案中包含相关代码和描述，以便我们在链接断开时有完整的答案