Animation not working correctly CSS3 - firefox

Question

I've been having CSS3 issues, the animation works in Chrome but doesn't work in Firefox.
The CSS 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;
}
Animation 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;
}
}
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:
#-moz-keyframes fade-in
{
from {
background-color:rgba(0, 0, 0, .0);
display:block;
}
to {
background-color:rgba(0, 0, 0, .6);
display:block;
}
}
But still no result.

Answer 1

I've put this in a fiddle and corrected the minor mistakes which imo did not cause a problem. The fiddle works fine in Firefox 35.0 / Mac OSX Yosemite.
http://jsfiddle.net/o3qqeL8k/
Which FF version are you using, on what OS?
#keyframes fade-in {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fade-in {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fade-in {
from {
opacity:0;
}
to {
opacity:1;
}
}
.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;
}
<div class="mwhaha"></div>