CSS3 无限动画在 Internet Explorer 11 中无法正常工作

Question

我有一个 CSS3 动画，它在 Chrome、Firefox、Safari 中完美运行，但在 IE11 中，在一个完整的动画之后会奇怪地跳动，就像没有动画一样。然后它又开始了。 http://screencast.com/t/7KpNdnk7XX1w

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

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

Answer 1

这个问题超级奇怪！
我不能告诉你为什么动画在 IE11 上是错误的，但我找到了一个让它运行良好的技巧:)
检查此代码笔：http://codepen.io/anon/pen/oxwXMW?editors=0100

我用 alternate 改变了 animation-direction 的值，我稍微改变了你的动画 (from --> 0%, 0.01% 和 to -> 100%)

告诉我它是否已在您的计算机上修复:)

CSS3 无限动画在 Internet Explorer 11 中无法正常工作

CSS3 Animation infinite not working correctly in Internet Explorer 11

css

animation

keyframe

css-animations