@keyframes rules in IE9

2019-08-10 22:49发布

My animation with @keyframes is not working in IE. On the net various sources say that it is supported in IE9 and some say that it is not supported. Does somebody know for sure so that I should stop working in that direction… And, if not, what is @-ms-keyframes I thought it is a prefix for IE… Thanks!

@-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;}  

}  

1条回答
地球回转人心会变
2楼-- · 2019-08-10 23:16

or to put robertc's comment into an answer: CSS3 animations are supported in IE starting with version 10 . If you are unsure about browser support, check out caniuse.com - the page rarely ever is wrong about this as the tables are based on tests and info coming from the browser-developers. Here's the link to the css3-animation support overview: http://caniuse.com/#feat=css-animation

for IE9 (and earlier versions) you have to rely on JavaScript and accept that animations wont work.

查看更多
登录 后发表回答