Creating this rotating animation using CSS - css

Question

This is the animation I'd like to make using CSS.
It is an animated PNG. Firefox is the only browser I know that will show the animation. Please view this in FireFox so you can see the animation. I'd like to try and make it in CSS so I can use it in more browsers and still get true transparency (which animated gifs can't provide)
<-- Here is a single one of the dots, which could be used to make the animation without having to create the dot's shading in css.
This fiddle http://jsfiddle.net/jvrvK/ shows what I've got so far. I sorta have the look of the spheres, but the animation doesn't seem to work in Chrome and I don't understand CSS animations enough to create the same type of rotation in the PNG.
Thanks very much for any help!
Fiddle code below:
<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;
}

Answer 1

Chrome can be fussy about prefixes, add PrefixFree library to your code. You could add the prefixes yourself, but I find PreFix Free much easier.
//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js
http://jsfiddle.net/adrianjmartin/jvrvK/2/
Another way would be to use SVG:
http://jsfiddle.net/adrianjmartin/AcvE5/3/

Answer 2

This would be an aproximate solution
demo
The HTML is the same that you had; the CSS is
.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;}
}
The trick is to set a transform that scales in X 2 times (to generate an elipse when rotated), then rotates and translates to make a circle.
Then apply a scale to make the circles grow, and at last counter-rotate to make the sphere look right
Of course, all the values are aproximate, the GIF is too small to tell if that is accurate

Answer 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

Answer 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 */}
}
See in action: http://jsfiddle.net/Ld9pP/1/
You'll probably choose the other one but whatever