IE9 中的@keyframes 规则答案

【问题标题】：@keyframes rules in IE9IE9 中的@keyframes 规则
【发布时间】：2016-01-19 15:53:05
【问题描述】：

@keyframes 的动画无法在 IE 中运行。在网上各种消息来源说它在 IE9 中受支持，有些人说它不受支持。有人确定我应该停止朝那个方向工作吗……如果没有，@-ms-keyframes 是什么我认为它是 IE 的前缀……谢谢！

@-webkit-keyframes move {
  0% {left: 0px;}
  49% {left: 940px; opacity: 1;}
  50% {left: 940px; opacity: 0;}
  51% {left: -940px; opacity: 0;}
  52% {left: -940px; opacity: 1;}
  100% {left: 0px;}
}

@-webkit-keyframes backup {
  0% {left: -940px;}
  100% {left: 940px;}  

}  

@-moz-keyframes move {
  0% {left: 0px;}
  49% {left: 940px; opacity: 1;}
  50% {left: 940px; opacity: 0;}
  51% {left: -940px; opacity: 0;}
  52% {left: -940px; opacity: 1;}
  100% {left: 0px;}
}

@-moz-keyframes backup {
  0% {left: -940px;}
  100% {left: 940px;}  

}  

@-ms-keyframes move {
  0% {left: 0px;}
  49% {left: 940px; opacity: 1;}
  50% {left: 940px; opacity: 0;}
  51% {left: -940px; opacity: 0;}
  52% {left: -940px; opacity: 1;}
  100% {left: 0px;}
}

@-ms-keyframes backup {
  0% {left: -940px;}
  100% {left: 940px;}  

}

【问题讨论】：

IE9 不支持 CSS 动画。

标签： html internet-explorer css-animations

【解决方案1】：

或者将 robertc 的评论放入答案中：从版本 10 开始，IE 支持 CSS3 动画。如果您不确定浏览器是否支持，请查看 caniuse.com - 该页面很少出错，因为表格基于来自浏览器开发人员的测试和信息。这是 css3 动画支持概述的链接：http://caniuse.com/#feat=css-animation

对于 IE9（及更早版本），您必须依赖 JavaScript 并接受动画无法正常工作。

【讨论】：