title: Creating this rotating animation using CSS
body: <p>This is the animation I'd like to make using CSS.
  <img src="https://i.stack.imgur.com/JnopT.png" alt="This spinner is what I&#39;d like to create"></p>
  
  <p>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)</p>
  
  <p><img src="https://i.stack.imgur.com/jpdeC.png" alt="enter image description here"> &lt;-- 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.</p>
  
  <p>This fiddle <a href="http://jsfiddle.net/jvrvK/" rel="nofollow noreferrer">http://jsfiddle.net/jvrvK/</a> 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.</p>
  
  <p>Thanks very much for any help! </p>
  
  <p>Fiddle code below:</p>
  
  <pre><code>&lt;ul class="busy"&gt;
      &lt;li class="busy-dot1"&gt;&lt;b class="busy-dot-shine"&gt;&lt;/b&gt;&lt;/li&gt;
      &lt;li class="busy-dot2"&gt;&lt;b class="busy-dot-shine"&gt;&lt;/b&gt;&lt;/li&gt;
      &lt;li class="busy-dot3"&gt;&lt;b class="busy-dot-shine"&gt;&lt;/b&gt;&lt;/li&gt;
      &lt;li class="busy-dot4"&gt;&lt;b class="busy-dot-shine"&gt;&lt;/b&gt;&lt;/li&gt;
      &lt;li class="busy-dot5"&gt;&lt;b class="busy-dot-shine"&gt;&lt;/b&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.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;
  }
  </code></pre>