cssのanimationがie11,Edgeで動かない時の対応方法について

Question

javascriptから、#content要素をblockに指定して、#contentをfadeInしたく以下のようにしたのですが、chromeでは動きますが、ie11,Edgeで動きませんでした。
どの部分が問題と考えられますでしょうか。

document.getElementById('content').style.display = 'block';

#content {
    display: none;
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

Answer 1

IE11でしか確認していませんが、表記通りの記述であれば問題なく動作していました。
http://jsfiddle.net/takmatz/fc99x27j/

ただし、以下のように@keyframesの記述を@mediaの中に記述している場合、Chromeではアニメーションして、IE11ではアニメーションしないという現象が確認できました。
http://jsfiddle.net/takmatz/ojd5a19c/

当該するような記述はされていないでしょうか？

Comments

[退会済みユーザー]

ご回答遅くなり大変申し訳ございません。
ありがとうございました。勉強になりました。