title: CSS3 Scale, Fade and Spin on the same element (why isn't SCALE working?!?)
body: <p>OK noobs. Need this circle to <strong>scale</strong> and <strong>fade</strong> in once at the beginning of the animation (while spinning) and continue to <strong>spin</strong> thereafter. Not that hard right!?! Got the <strong>fade</strong> and <strong>spin</strong> working but <strong>scale</strong> just refuses to work! </p>
  
  <p>Is there a <strong>fat finger</strong> somewhere? Before I rip out what hair I have left,  <strong><em>please expose my noobness and why SCALE is not working</em></strong>? Thank you, that is all...</p>
  
  <p>Latest <strong>FF</strong> only. <em>(To lazy to code for everything else.)</em></p>
  
  <p><a href="http://jsfiddle.net/dragontheory/sRdfD/" rel="nofollow">JS Fiddle EXAMPLE</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt; 
  div
  {width: 100px;
  height: 100px;
  background: transparent;
  border: solid 10px blue;
  border-radius: 50%;
  border-top: solid 10px transparent;
  border-bottom: solid 10px transparent;
  
  -moz-animation-name: scaleIn,fadeIn,spin;
  -moz-animation-duration: 1s,1s,1s;
  -moz-animation-timing-function: ease-in,ease-in,linear;
  -moz-animation-delay: 0,0,0;
  -moz-animation-iteration-count: 1,1,infinite;
  -moz-animation-direction: normal,normal,normal;
  -moz-animation-fill-mode: forwards,forwards,forwards;
  -moz-animation-play-state: running,running,running;}
  
  @-moz-keyframes scaleIn
  {
  from    {-moz-transform: scale(2);}
  to      {-moz-transform: scale(1);}
  }
  
  @-moz-keyframes fadeIn
  {
  from   {opacity: 0.0;}
  to     {opacity: 1.0;}
  }
  
  @-moz-keyframes spin
  {
  from  {-moz-transform: rotate(0deg);}
  to    {-moz-transform: rotate(360deg);}
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>