IE11のiframe内でCSSのアニメーションが再生されない

Question

私は現在HTML5/JS Webappを作成しています。これは既存のHTMLコードに統合されます。既存のコードには、iframeが含まれています。このURLには、私のwebappのURLがロードされます。

I私のCSSファイルで設定し、次のアニメーションがあります。今

@-moz-keyframes peopleSlideLeft { 
    0% { 
    left: -500px; 
    } 
    100% { 
    left: 0px; 
    } 
} 
@-webkit-keyframes peopleSlideLeft { 
    0% { 
    left: -500px; 
    } 
    100% { 
    left: 0px; 
    } 
} 
@keyframes peopleSlideLeft { 
    0% { 
    left: -500px; 
    } 
    100% { 
    left: 0px; 
    } 
} 

.container .left .people-container .people .person.slideInLeft { 
    -webkit-animation: peopleSlideLeft 0.75s forwards; 
    -moz-animation: peopleSlideLeft 0.75s forwards; 
    animation: peopleSlideLeft 0.75s forwards; 
} 

私は、独自のウィンドウで私のWebアプリケーションを起動した場合は、その後、アニメーションがしかし、Webアプリケーションを使ってロードされたときに、問題なく果たしていますiframe、アニメーションは起動しません（注：この問題はIE11でのみ発生しますが、Chrome、Firefox、Edgeはiframeとoutの両方で正しく動作します）。

slideInLeftクラスは、私がアニメーション化したいHTML要素に確実に結び付けられています。また、@keyframesはロードされたCSSに間違いありませんが、アニメーションはまだ再生されません。

以下の画像は、IE11のDevコンソールから直接、次のとおりです。私は行方不明です何かが

ありますか？

Answer 1

で非接頭辞を追加していることを確認してくださいだから私は、以来、問題が何であったかが分かってきました。

<meta http-equiv="X-UA-Compatible" content="IE=9"> 

これを変更する

<meta http-equiv="X-UA-Compatible" content="IE=9;IE=10"> 

なるようにアニメーションが正常に完了することができ：私のWebアプリケーションをロードしたのiframeを含ま親ページはheadセクションで、次のmetaタグを持っていました。

Answer 2

あなたが最後

@-moz-keyframes peopleSlideLeft { 
     0% { 
     left: -500px; 
     } 
     100% { 
     left: 0px; 
     } 
    } 
    @-webkit-keyframes peopleSlideLeft { 
     0% { 
     left: -500px; 
     } 
     100% { 
     left: 0px; 
     } 
    } 
    @-ms-keyframes peopleSlideLeft { 
     0% { 
     left: -500px; 
     } 
     100% { 
     left: 0px; 
     } 
    } 
    @keyframes peopleSlideLeft { 
     0% { 
     left: -500px; 
     } 
     100% { 
     left: 0px; 
     } 
    } 

    .container .left .people-container .people .person.slideInLeft { 
     -webkit-animation: peopleSlideLeft 0.75s forwards; 
     -moz-animation: peopleSlideLeft 0.75s forwards; 
     -ms-animation: peopleSlideLeft 0.75s forwards; 
     animation: peopleSlideLeft 0.75s forwards; 
    }