title: Animation not working correctly CSS3
body: <p>I've been having CSS3 issues, the animation works in Chrome but doesn't work in Firefox.</p>
  
  <p>The CSS code:</p>
  
  <pre><code>.mwhaha {
      width:100%;
      height:100%;
      position:fixed;
      z-index:98;
      background-color:rgba(0, 0, 0, .6);
      animation: fade-in 2s;
      -moz-animation: fade-in 2s;
      -webkit-animation: fade-in 2s;
  }
  </code></pre>
  
  <p>Animation code:</p>
  
  <pre><code>@keyframes fade-in
  {
      from {
          opacity:0;
          display:block;
      }
      from {
          opacity:1;
          display:block;
      }
  }
  @-moz-keyframes fade-in
  {
      from {
          opacity:0;
          display:block;
      }
      to {
          opacity:1;
          display:block;
      }
  }
  @-webkit-keyframes fade-in
  {
      from {
          opacity:0;
          display:block;
      }
      to {
          opacity:1;
          display:block;
      }
  }
  </code></pre>
  
  <p>Like i said, the code works in Chrome but doesn't work in Firefox.
  I've been trying several other methods to make it work like:</p>
  
  <pre><code>@-moz-keyframes fade-in
  {
      from {
          background-color:rgba(0, 0, 0, .0);
          display:block;
      }
      to {
          background-color:rgba(0, 0, 0, .6);
          display:block;
      }
  }
  </code></pre>
  
  <p>But still no result.</p>