CSS3 Animation Not Working in IE10
This was very frustrating. I knew I’d written my keyframes correctly for an animation, I tested it out with all the other browsers (I know Chrome needs the -webkit- prefix) and everything was fine, but when looking at it in IE10, my CSS3 animation was not working.
/* this is in a .scss file, thus the $variable */
$tossing-start: -32deg;
$tossing-middle: -22deg;
@keyframes tossing {
0% {
transform: rotate($tossing-start);
}
50% {
transform: rotate($tossing-middle);
}
100% {
transform: rotate($tossing-start);
}
}
Simple rotation animation that was absolutely refusing to work in IE10. I looked for jQuery workarounds and all sorts of ways to fix it until I saw this thread on CSS Tricks. My animations were inside of a 768px media query (because I didn’t want the animation on mobile).
After placing the keyframes outside of the media query it worked fine. Major facepalm. I’m curious as to why it won’t work inside a media query so I’ve emailed the Microsoft support team to hopefully find out the reasons behind why this is. I’m not holding my breath but will be really excited if they respond.
Hi I tried to replicate your issue…. It works fine in IE9 and IE10: Here is the fiddle example: http://jsfiddle.net/9Ak52/
Take the keyframe definitions out of the mediaquery – only apply the animation there. Then it works. It is a scoping issue.
Yep, that’s what I did. Was definitely a head-scratcher at the time.Glad it’s fixed for IE11 though.
Thanks, this one’s been driving me mad for weeks now! My animation finally working as expected in IE.
Thanks, very useful!
Thanks for this post, I couldn’t work out why IE11 was refusing to play ball!