title: CSS3 Animation polyfill
body: <p>I'm looking to get a CSS3 animation to work; works fine in all major browsers but IE9 and older (no surprise there). So without further ado, here's the CSS :</p>
  
  <pre><code>#grosse_photo {
      /*...*/
      -webkit-animation: photoFade 12s infinite;
      -moz-animation:photoFade 12s infinite;
      -ms-animation: photoFade 12s infinite;
      animation-iteration-count:1;
      -moz-animation-iteration-count:1;
      -webkit-animation-iteration-count:1;
      -o-animation-iteration-count:1;
  }
      @-webkit-keyframes photoFade {
          0%   { opacity: 0.0; }
          100% { opacity: 1.0; }
      }
      @-moz-keyframes photoFade {
          0%   { opacity: 0.0; }
          100% { opacity: 1.0; }
      }
      @-o-keyframes photoFade {
          0%   { opacity: 0.0; }
          100% { opacity: 1.0; }
      }
      @keyframes photoFadee {
          0%   { opacity: 0.0; }
          100% { opacity: 1.0; }
      }
  </code></pre>
  
  <p>I used the <code>-ms</code> prefix thinking it would react like <code>-webkit</code>, but obviously IE (lte 9) didn't cooperate.</p>
  
  <p>I also need elements to slide in, but since IE won't cooperate, I'm thinking I'm forgetting an obvious polyfill other than <a href="http://modernizr.com/">modernizr</a>.</p>
  
  <p>Though not optimal, I've seen many refer to jQuery alternatives, though I am still looking for a snippet which will allow for different animations at different times and speeds.</p>