Firefox 动画无法正常工作CSS3

我一直有CSS3的问题，动画在Chrome中工作，但在Firefox中不工作

CSS代码：

.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;
}

动画代码：

@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;
    }
}

就像我说的，这段代码在Chrome中有效，但在Firefox中不起作用。 我一直在尝试其他几种方法使其工作，如：

@-moz-keyframes fade-in
{
    from {
        background-color:rgba(0, 0, 0, .0);
        display:block;
    }
    to {
        background-color:rgba(0, 0, 0, .6);
        display:block;
    }
}

---

但是仍然没有结果。

我已经把这一点放在小提琴上，并纠正了imo没有造成问题的小错误。fiddle在Firefox35.0/MacOSXYosemite中运行良好

您在什么操作系统上使用哪个FF版本

@关键帧淡入{
从{
不透明度：0；
}
到{
不透明度：1；
}
}
@-moz关键帧淡入{
从{
不透明度：0；
}
到{
不透明度：1；
}
}
@-webkit关键帧淡入{
从{
不透明度：0；
}
到{
不透明度：1；
}
}
姆瓦哈先生{
宽度：100%；
身高：100%；
位置：固定；
z指数：98；
背景色：rgba（0,0,0,6）；
动画：淡入2s；
-moz动画：淡入2s；
-webkit动画：淡入2s；
}

---

在关键帧中重复使用from？Oops，将修复它并尝试是否有效。我的坏：）/EDIT:仍然不工作我将代码复制到网页中，动画效果很好。你的问题一定在别处。我不认为

display

和类似的不可设置动画的值是受支持的；请尝试仅使用背景色