CSS3のアニメーションがInternet Explorer 11で正しく動作しない

Question

CSS3のアニメーションはChrome、Firefox、Safariでは完璧に機能しますが、フルアニメーションの1つがアニメーションがないようにジャンプした後はIE11で完全に機能します。その後、それは再び始まります。 http://screencast.com/t/7KpNdnk7XX1w

.main-circle { 
 
\t position: relative; 
 
\t height: 19.5rem; \t 
 
\t width: 19.5rem; 
 
\t margin-left: 2rem; 
 
\t border-radius: 100%; \t 
 
\t border: 1px solid black; \t 
 
} 
 
.orbit { 
 
\t display: block; 
 
\t position: absolute; 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t width: 5em; 
 
\t height: 5em; 
 
\t margin-top: -2.25em; 
 
\t margin-left: -2.25em; 
 
\t border-radius: 100%; \t 
 
\t border: 1px solid black; 
 
\t animation-name: orbit; 
 
\t animation-iteration-count: infinite; \t 
 
\t animation-direction: alternate-reverse; \t 
 
\t animation-timing-function: ease-in-out; 
 
\t animation-duration: 1s; 
 
\t background: white; 
 
} 
 
@keyframes orbit { 
 
\t from { transform: rotate(355deg) translateX(-9.75em) rotate(-355deg); } 
 
\t to { transform: rotate(290deg) translateX(-9.75em) rotate(-290deg);} 
 
}

<div class="main-circle"> 
 
\t <div class="orbit"></div> 
 
</div>

Answer 1

この問題は、スーパー奇妙です！
アニメーションがIE11に間違っているなぜ私はあなたを伝えることはできませんが、私はそれがうまく動作させるためにトリックを見つけ:)
このcodepenをチェックしてください：http://codepen.io/anon/pen/oxwXMW?editors=0100

を私はalternateでanimation-directionの値を変更し、私はあなたを変更アニメーションビット（from - >0%, 0.01%とto - >100%）

それがコンピュータに固定されたなら教えてください:)