firefox - 动画无法正常工作 CSS3

Question

我一直遇到 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;
    }
}

但还是没有结果。

Answer 1

我已经把它放在 fiddle 里并纠正了我没有引起问题的小错误。 fiddle 在 Firefox 35.0/Mac OSX Yosemite 中运行良好。

http://jsfiddle.net/o3qqeL8k/

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

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