CSS3 Animasyon sonsuz, Internet Explorer 11'de düzgün çalışmıyor 11

Question

Chrome, Firefox, Safari'de mükemmel bir şekilde çalışan bir IE3 animasyonu var, ancak tam bir animasyon, animasyon olmadığından garip bir şekilde atladıktan sonra IE11'de. Sonra tekrar başlar. 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

Bu sorun süper garip!
animasyon IE11 üzerinde yanlış ama :) iyi iş
Kontrol Bu codepen yapmak için bir hile buldum neden söyleyemem: http://codepen.io/anon/pen/oxwXMW?editors=0100

Ben alternate ile animation-direction değerini değiştirdi ve ben değiştirdi senin animasyon biraz (from ->0%, 0.01% ve to ->100%)

bilgisayarınıza :)