CODEWITHSUNDEEP
htmlinternet-explorercss-animations
Claudiu Creanga
Claudiu Creanga

Reputation: 8366

@keyframes rules in IE9

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

}

Upvotes: 1

Views: 12429

Answers (1)

Jörn Berkefeld
Jörn Berkefeld

Reputation: 2579

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.

Upvotes: 6

Related Questions