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%）

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