CSS3 Animation Not Working in IE10

Posted on: September 11th, 2013

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.

facesmash Tags: ,

previous post: Disavowing Links – rel=”nofollow” next post: Five “Must Have” Chrome Extensions

  • thebeebs

    Hi I tried to replicate your issue…. It works fine in IE9 and IE10: Here is the fiddle example: http://jsfiddle.net/9Ak52/

  • Christian Heilmann

    Take the keyframe definitions out of the mediaquery – only apply the animation there. Then it works. It is a scoping issue.

    • johnbhartley

      Yep, that’s what I did. Was definitely a head-scratcher at the time.Glad it’s fixed for IE11 though.

  • http://www.8bitfuture.com/ Optimus Lime

    Thanks, this one’s been driving me mad for weeks now! My animation finally working as expected in IE.

  • http://valdelama.com/ Dan Winer

    Thanks, very useful!