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

Posted 2023-03-06

【中文标题】CSS3 动画无限在 Internet Explorer 11 中无法正常工作

【英文标题】：CSS3 Animation infinite not working correctly in Internet Explorer 11

【发布时间】：2016-07-13 04:47:35

【问题描述】：

我有一个 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>

【问题讨论】：

在 IE11 + Win 10 上看不到任何此类问题。

查看附加的截屏视频是通过浏览器堆栈在 IE11@Win10 上使用此dabblet.com/gist/0008834232ff19226069 制作的。在真正的 IE11@Win7 上也得到了证实。错误出现在第一个完整动画循环之后。

【参考方案1】：

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

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

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

【讨论】：

太棒了。这解决了问题！这显然是 IE11 中的一个错误，他们似乎已在 Edge 中修复了该错误。 :)

天哪，我完全忘记了这个 0.01 奇怪的修复。我的情况是动画被设置为 opacity: 0;将其更改为 0.01 而不是 0 修复 IE11 =/