IE9中的@keyframes规则

Cla*_*nga 1 html5 internet-explorer css-animations

我的动画@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;}  

}  
Run Code Online (Sandbox Code Playgroud)

Jör*_*eld 6

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

对于IE9(和早期版本),你必须依赖JavaScript并接受动画不能工作.