CSS3 Animation在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上是错误的,但我发现了一个让它运行良好的技巧:)
检查这个codepen:http://codepen.io/anon/pen/oxwXMW？edit = 0100

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

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