CSS3アニメーションIE11号

Question

私はIE11に奇妙な問題があります。

ちょうどcss3アニメーションの束で全体のサイトを作成し、IE11の1つの要素のアニメーション（IE11で他の要素が動作します）以外はすべて素晴らしいです。ここで

コードです：

.arrow.forward { 
     bottom:0px; 
     animation:forwardarrow 0.3s 10s forwards; 
    } 
@keyframes forwardarrow { 
    0% { 
     bottom:0px; 
    } 
    100% { 
     bottom:-18.5px; 
    } 
} 

私はすべてがそれと罰金だと思う - しかし、これはIE11で動作していない唯一の要素である - のみとIEで。

IE11でオブジェクトを検査してアニメーションを無効にすると、forwardarrow 0.3s 10s forwards;それを元に戻すことができます。それは仕事ですが、負荷ではありません... ...何が起こっているのですか？ここ

は私のメタタグです：

<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=9;IE=10;IE=Edge,chrome=1"/> 
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1"> 

Answer 1

私は答えを見つけました。 .arrow.forwardは、他のアニメーションを含む他のhtml要素にネストされていました。

理由はわかりませんが、IE 11では子要素をアニメーション化したくありません。

私は他の親と一緒にそれをネストして、すべて正常に動作します。

<div class="arrow-container"> 
    <div> <!-- aditional div to prevent parenting issues;) --> 
     <div class="svg arrow click back" data-svgIcon="thin-arrow"></div> 
     <div class="svg arrow click forward" data-svgIcon="thin-arrow"></div> 
    </div> 
</div>