title: css keyframe animation in firefox and IE
body: <p><a href="http://dev.viral-minds.com/miller/abc/abc.html" rel="nofollow">http://dev.viral-minds.com/miller/abc/abc.html</a></p>
  
  <p>two questions about this</p>
  
  <ol>
  <li>How do I keep the green block from "blinking" at the beginning when the page loads?</li>
  <li>The animation only works on chrome at the moment...how to get it to work in FF and IE?</li>
  </ol>
  
  <p>thanks.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;main&lt;/title&gt;
  
      &lt;style type="text/css"&gt;
          body 
          {
              background-color:#FFFFF0; /*ivory*/
              overflow: hidden;
          }
  
          #box
          {
              position: absolute;
              width:495px;
              height:263px;
              background:#32331d;
              top: 20px;
              left: 20px;
          }
  
          #nav
          {
              position: absolute;
              margin-left:30px;
              width:100%;
              height:100px;
              top: 425px;
              z-index: 100;
              background-image:url('colors.png');
              background-repeat:no-repeat;
          }
  
  
          #stars,
          #stars-2,
          #small-stars,
          #small-stars-2 {
              position: absolute;
              top: 50%;
              left: 50%;
              width: 800px;
              height: 800px;
              margin: -300px 0 0 -300px;
              background: url(stars-large.png) no-repeat center center;
              -webkit-animation-name: starsLarge;
              -webkit-animation-duration: 240s;
              -webkit-animation-iteration-count: infinite;
              -webkit-animation-timing-function: linear;
          }
  
          @-webkit-keyframes starsLarge {
              from {
                  -webkit-transform: rotate(0deg) scale(3);
                  opacity: .9;
              }
              to {
                  -webkit-transform: rotate(360deg) scale(.5);
                  opacity: .5;
              }
          }
  
          #stars-2 {
              -webkit-animation-name: starsLargeAlt;
              -webkit-animation-duration: 180s;
              -webkit-animation-iteration-count: infinite;
              -webkit-animation-timing-function: linear;
          }
  
          @-webkit-keyframes starsLargeAlt {
              from {
                  -webkit-transform: rotate(180deg) scale(3);
                  opacity: .9;
              }
              to {
                  -webkit-transform: rotate(360deg) scale(.5);
                  opacity: .5;
              }
          }
  
          #small-stars,
          #small-stars-2 {
              background: url(stars-small.png) no-repeat center center;
              -webkit-animation-duration: 60s;
              -webkit-animation-name: starsSmall;
          }
  
          #small-stars-2 {
              -webkit-animation-name: starsSmallAlt;
              -webkit-animation-duration: 120s;
          }
  
          @-webkit-keyframes starsSmall {
              from {
                  -webkit-transform: rotate(360deg) scale(3);
                  opacity: .9;
              }
              to {
                  -webkit-transform: rotate(0deg) scale(.5);
                  opacity: .5;
              }
          }
  
          @-webkit-keyframes starsSmallAlt {
              from {
                  -webkit-transform: rotate(0deg) scale(3);
                  opacity: .9;
              }
              to {
                  -webkit-transform: rotate(360deg) scale(.5);
                  opacity: .5;
              }
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="box"&gt;&lt;img src="actual.png"&gt;&lt;/img&gt;&lt;/div&gt;
      &lt;div id="nav"&gt;&lt;/div&gt;
      &lt;div id="stars"&gt;&lt;/div&gt;
      &lt;div id="stars-2"&gt;&lt;/div&gt;
      &lt;div id="small-stars"&gt;&lt;/div&gt;
      &lt;div id="small-stars-2"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>