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