【问题标题】：Creating this rotating animation using CSS使用 CSS 创建这个旋转动画
【发布时间】：2013-09-13 23:42:33
【问题描述】：

这是我想使用 CSS 制作的动画。

这是一个动画PNG。 Firefox 是我所知道的唯一会显示动画的浏览器。请在 FireFox 中查看，以便您可以看到动画。我想尝试用 CSS 制作它，这样我就可以在更多浏览器中使用它并且仍然获得真正的透明度（动画 gif 无法提供）

这个小提琴http://jsfiddle.net/jvrvK/ 展示了我到目前为止所拥有的东西。我有点像球体的样子，但动画似乎在 Chrome 中不起作用，而且我对 CSS 动画的理解不足以在 PNG 中创建相同类型的旋转。

非常感谢您的帮助！

下面的小提琴代码：

<ul class="busy">
    <li class="busy-dot1"><b class="busy-dot-shine"></b></li>
    <li class="busy-dot2"><b class="busy-dot-shine"></b></li>
    <li class="busy-dot3"><b class="busy-dot-shine"></b></li>
    <li class="busy-dot4"><b class="busy-dot-shine"></b></li>
    <li class="busy-dot5"><b class="busy-dot-shine"></b></li>
</ul>

.busy {
    list-style: none;
    padding: 0;
    position: relative;
    transform-style: preserve-3d;
    animation: rot 4s linear infinite;
    width:100px;
}

.busy-dot1, .busy-dot2, .busy-dot3, .busy-dot4, .busy-dot5 {
    border-radius: 50%;
    display: inline-block;
    transform-style: preserve-3d;
    margin: 0 4px;
}

.busy-dot-shine {
    display: block;
    border-radius: 50%;
    background: radial-gradient(circle at 25% 25%, #FFF, rgba(255,255,255,0));
    background-color: #193987;
    animation: rotr 4s linear infinite;
    height: 20px;
    width: 20px;
}

【问题讨论】：

GIF 有什么问题（实际问题）？
尽管我同意您尝试获得真正的透明度等，但请考虑您在此处编写的代码量以及您要求浏览器执行的工作量，所有这些都是为了一个非常小的动画（看起来像一个进度等待动画，所以可能不会在屏幕上显示太久）。动画 Gif 真的那么糟糕吗？
我完全赞成使用图形，但是因为它需要放置在各种不可预知的背景上，所以动画 gif 将不起作用，因为它只适用于单一的纯色。如果所有浏览器都支持动画 PNG，我会使用它。

标签： css css-animations

【解决方案1】：

Chrome 可能对前缀很挑剔，请将 PrefixFree 库添加到您的代码中。您可以自己添加前缀，但我发现 PreFix Free 更容易。

//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js

http://jsfiddle.net/adrianjmartin/jvrvK/2/

另一种方法是使用 SVG： http://jsfiddle.net/adrianjmartin/AcvE5/3/

【讨论】：

我已经为您的第一个答案投票，我想再次为您投票支持 SVG 变体。请注意，代码中存在错误：将 begin="1.s" 更改为 begin="1.00s" 以使最后一个圆圈正常工作（最终将 .26 更改为 .25 以尊重步长）。干得好。
@AndreaLigios 已修复！谢谢。我来回摆弄价值观，试图接近 OP 想要的东西。
感谢 SVG 示例。除了缺少缩放之外，这很酷。
我尝试添加缩放，它看起来很奇怪，我还必须更改时间以补偿点移动分开。另一个问题是当点越来越靠近时，您会遇到分层问题，即伪 3d 空间中的绘制顺序将是错误的。我完全赞成使用 SVG 和 CSS，但我认为你可以放松 3D 效果并创建一个更好看的微调器。

【解决方案2】：

这将是一个近似的解决方案

demo

HTML 和你的一样； CSS是

.busy {
    list-style: none;
    padding: 0;
    position: relative;
    width:100px;
}

.busy-dot1, .busy-dot2, .busy-dot3, .busy-dot4, .busy-dot5 {
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    left: 150px;
    top: 50px;
    -webkit-animation: rot 4s linear infinite;
    animation: rot 4s linear infinite;
}

.busy-dot2 {
    -webkit-animation-delay: -3.5s;
    animation-delay: -3.5s;
}
.busy-dot3 {
    -webkit-animation-delay: -3s;
    animation-delay: -3s;
}
.busy-dot4 {
    -webkit-animation-delay: -2.7s;
    animation-delay: -2.7s;
}

.busy-dot-shine {
    display: block;
    border-radius: 50%;
    background: radial-gradient(circle at 25% 25%, #FFF, rgba(255,255,255,0));
    background-color: #193987;
    height: 20px;
    width: 20px;
}
.busy-dot2 .busy-dot-shine {
    height: 15px;
    width: 15px;
}
.busy-dot3 .busy-dot-shine {
    height: 10px;
    width: 10px;
}
.busy-dot4 .busy-dot-shine {
    height: 6px;
    width: 6px;
}

@-webkit-keyframes rot {
    0% {-webkit-transform: scaleX(2) rotate(0deg) translateX(50px) scale(1) rotate(0deg) scaleX(0.5);   
        opacity: 0.5;}
   25% {-webkit-transform: scaleX(2) rotate(90deg) translateX(50px) scale(1.5) rotate(-90deg) scaleX(0.5);
        opacity: 0.8;}
   50% {-webkit-transform: scaleX(2) rotate(180deg) translateX(50px) scale(1) rotate(-180deg) scaleX(0.5);
        opacity: 0.5;}
   75% {-webkit-transform: scaleX(2) rotate(270deg) translateX(50px) scale(0.8) rotate(-270deg) scaleX(0.5);
   opacity: 0.2;}
  100% {-webkit-transform: scaleX(2) rotate(360deg) translateX(50px) scale(1) rotate(-360deg) scaleX(0.5);
  opacity: 0.5;}
}

@keyframes rot {
    0% {transform: scaleX(2) rotate(0deg) translateX(50px) scale(1) rotate(0deg) scaleX(0.5);   
        opacity: 0.5;}
   25% {transform: scaleX(2) rotate(90deg) translateX(50px) scale(1.5) rotate(-90deg) scaleX(0.5);
        opacity: 0.8;}
   50% {transform: scaleX(2) rotate(180deg) translateX(50px) scale(1) rotate(-180deg) scaleX(0.5);
        opacity: 0.5;}
   75% {transform: scaleX(2) rotate(270deg) translateX(50px) scale(0.8) rotate(-270deg) scaleX(0.5);
        opacity: 0.2;}
  100% {transform: scaleX(2) rotate(360deg) translateX(50px) scale(1) rotate(-360deg) scaleX(0.5);
        opacity: 0.5;}
}

诀窍是设置一个缩放 X 2 倍的变换（旋转时生成一个椭圆），然后旋转并平移以形成一个圆。

然后应用比例使圆圈变大，最后反向旋转使球体看起来正确

当然，所有值都是近似值，GIF 太小，无法判断是否准确

【讨论】：

这看起来相当接近。感谢您的帮助。

【解决方案3】：

HTML：

<div id="all">
  <div id="box">
    <div id="circle"></div>
  </div>
  <div id="box" class="box2">
    <div id="circle" class="circle2"></div>
  </div>
  <div id="box" class="box3">
    <div id="circle" class="circle3"></div>
  </div>
  <div id="box" class="box4">
    <div id="circle" class="circle4"></div>
  </div>
  <div id="box" class="box5">
    <div id="circle" class="circle5"></div>
  </div>
</div>

CSS：

#box {
    position: absolute;
    width: 50px;
    height: 50px;
}
.box2 {
    -webkit-transform: rotate(35deg);
}
.box3 {
    -webkit-transform: rotate(70deg);
}
.box4 {
    -webkit-transform: rotate(105deg);
}
.box5 {
    -webkit-transform: rotate(140deg);
}
.circle2 {
    -webkit-transform: scale(.8);
}
.circle3 {
    -webkit-transform: scale(.6);
}
.circle4 {
    -webkit-transform: scale(.4);
}
.circle5 {
    -webkit-transform: scale(.2);
}
#circle {
    position: relative;
    top: 0px;
    left: 50px;
    border-radius: 50%;
    background: radial-gradient(circle at 25% 25%, #FFF, rgba(255, 255, 255, 0));
    background-color: #193987;
    animation: rotr 4s linear infinite;
    height: 20px;
    width: 20px;
}
#all {
    position: relative;
    top: 50px;
    left: 50px;
    width: 50px;
    height: 50px;

    animation: myfirst;
    animation-duration: 05s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

    -webkit-animation-name: myfirst;
    -webkit-animation-duration: 05s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}
 @keyframes myfirst {
0% { transform: rotate(360deg);}
}
 @-webkit-keyframes myfirst {
0% { -webkit-transform: rotate(360deg);}
}

Live demo

【讨论】：

【解决方案4】：

HTML：

<ul class="busy">
    <li class="busy-dot1"><b class="busy-dot-shine"></b></li>
</ul>

CSS：

.busy {
    list-style: none;
    padding: 0;
    position: relative;
    transform-style: preserve-3d;
    animation: rot 4s linear infinite;
    width:700px;
}

.busy-dot1, .busy-dot2, .busy-dot3, .busy-dot4, .busy-dot5 {
    border-radius: 50%;
    display: inline-block;
    transform-style: preserve-3d;
    margin: 0 4px;
}

.busy-dot-shine {
    display: block;
    border-radius: 50%;
    background: radial-gradient(circle at 25% 25%, #FFF, rgba(255,255,255,0));
    background-color: #193987;
    animation: rotr 4s linear infinite;
    height: 60px;
    width: 60px;
}
.busy li
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
animation:rotate 5s linear infinite;
-webkit-animation:rotate 5s linear infinite; /* Safari and Chrome */
}

@keyframes rotate
{
from {transform:rotate(0deg);
-ms-transform:rotate(0deg); /* IE 9 */
-webkit-transform:rotate(0deg); /* Safari and Chrome */}
to {transform:rotate(-180deg);
-ms-transform:rotate(-180deg); /* IE 9 */
-webkit-transform:rotate(-180deg); /* Safari and Chrome */}
}

@-webkit-keyframes rotate /* Safari and Chrome */
{
from {transform:rotate(0deg);
-ms-transform:rotate(0deg); /* IE 9 */
-webkit-transform:rotate(0deg); /* Safari and Chrome */}
to {transform:rotate(-360deg);
-ms-transform:rotate(-360deg); /* IE 9 */
-webkit-transform:rotate(-360deg); /* Safari and Chrome */}
}

实际操作：http://jsfiddle.net/Ld9pP/1/

你可能会选择另一个，但无论如何

【讨论】：

问题是这里只有一个忙点，而且这个点不像动画 PNG 那样旋转。您是否在 FF 中查看过它的动画效果？
+1 用于滚动条的 lulz 将内容移出 jsFiddle 的框架！ :D
让我看看...它动画并且不只在 chrome 中完成..我不知道它为什么这样做...jsfiddle.net/Ld9pP/1