title: Simple (?) CSS Animation of Opacity Property
body: <p>Ok, I don't get this. I've done CSS3 animations before, but for some reason simply animating the opacity isn't working for me today. Am I missing something silly?</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>@-webkit-keyframes fadein {
      from: { opacity: 0; }
      to: { opacity: 1; }
  }
  
  @-moz-keyframes fadein {
      from: { opacity: 0; }
      to: { opacity: 1; }
  }
  
  @keyframes fadein {
      from: { opacity: 0; }
      to: { opacity: 1; }
  }
  
  #foo {
      background-color: green;
      color: white;
      -webkit-animation: fadein 2s ease-in alternate infinite;
      -moz-animation: fadein 2s ease-in alternate infinite;
      animation: fadein 2s ease-in alternate infinite;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="foo"&gt;This is Foo!&lt;/div&gt;
  </code></pre>
  
  <p>I've also posted it as a fiddle:
  <a href="http://jsfiddle.net/NRutman/Lcyvy/" rel="noreferrer">http://jsfiddle.net/NRutman/Lcyvy/</a></p>
  
  <p>Any help would be appreciated.</p>
  
  <p>Thanks,
  -Nate</p>