アニメーションが正しく動作しません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

私はこれをフィドルに入れて、問題を起こさなかった小さなミスを修正しました。 Firefox 35.0/Mac OSX Yosemiteではフィドルがうまく動作します。あなたはどのようなOS上で、使用しているFFバージョン

http://jsfiddle.net/o3qqeL8k/

？

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