CSS 动画在 Internet Explorer 中不起作用，特别是 IE9答案

【问题标题】：CSS animation not working in Internet Explorer, specifically IE9CSS 动画在 Internet Explorer 中不起作用，特别是 IE9
【发布时间】：2016-06-30 05:25:01
【问题描述】：

这是我正在使用的代码。在 Chrome 和 Firefox 中运行良好，但在 IE 中运行良好，无法弄清楚我做错了什么。基本上是一个自动图像滑块。在 IE 中，我只是得到第一个没有滑动的 img。

任何帮助将不胜感激。

<style type="text/css">
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

@-webkit-keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

@-moz-keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

@-o-keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

@-ms-keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite; 
  -webkit-animation: 30s slidy infinite; 
  -moz-animation: 30s slidy infinite; 
  -o-animation: 30s slidy infinite; 
  -ms-animation: 30s slidy infinite; 
}
</style>
<div id="slider">
<figure>
    <img alt="" src="#" />
    <img alt="" src="#" />
    <img alt="" src="#" />
    <img alt="" src="#" />
    <img alt="" src="http://static.lakana.com/nxsglobal/lasvegasnow/photo/2016/05/24/5mayors300X100-black-border_1464108603276_8689483_ver1.0.jpg" />
</figure>
</div>

【问题讨论】：

@keyframes 不支持 until IE10

标签： html css internet-explorer css-animations

【解决方案1】：

正如您在此处看到的，IE9 不支持 CSS 动画：http://caniuse.com/#feat=css-animation

【讨论】：

"yet" 可能是错误的词。 IE < 11 is no longer supported by Microsoft.
@4castle 即使您的答案不是 100% 正确（Windows Server 2012 下的 IE10 仍受支持，甚至 Windows Vista 下的 IE9 直到 2017 年），我同意，微软可能不会进一步开发它们。删除“还”:)

【解决方案2】：

是的，问题是必须使用 IE。如果是针对客户的，您可以告诉他们您无法在旧版浏览器上使用此功能，可能会显示一些内容来代替它（最好是升级浏览器的消息）

【讨论】：