title: CSS3 Keyframes Do Not Override default background color in FF and IE10
body: <p>In chrome, this works as intended:</p>
  
  <p>"-webkit-animation: fadeBox 1s ease-in-out" overides "background-color: rgba(255,255,255,.9)" in #lightbox{}. </p>
  
  <p>But in mozilla and ie10 it seems that  "background-color: rgba(255,255,255,.9)" in #lightbox overides the animation: fadeBox 4s ease-in-out; and I don't get the fade effect. </p>
  
  <p>I have to have "background-color: rgba(255,255,255,.9)" in #lightbox so when the keyframes are done the background color remains white. </p>
  
  <p>Not sure what to do about this for firefox and IE10. </p>
  
  <pre><code>#lightbox {
      position: fixed;
      left: 0px;
      right: 0px;
      bottom: 0px;
      top: 0px;
      background-color: rgba(255,255,255,.9); &lt;-----DEFAULT COLOR AFTER ANIMATION IS DONE
      z-index: 150;
      background-size: cover;
      -webkit-animation: fadeBox 1s ease-in-out;
      -moz-animation: fadeBox 4s ease-in-out;
      animation: fadeBox 4s ease-in-out;
  }
  
  @-webkit-keyframes fadeBox {
      0% { background-color: rgba(255,255,255,.0) }
      100% { background-color: rgba(255,255,255,.9) }
  }
  
  @-moz-keyframes fadeBox {
      0% { background-color: red }
      100% { background-color: red }
  }
  
  @keyframes fadeBox {
      0% { background-color: rgba(255,255,255.0) }
      100% { background-color: rgba(255,255,255.9) }
  }
  </code></pre>