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.

facesmash

Subscribe
Notify of
guest
6 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
thebeebs
thebeebs
7 years ago

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
Christian Heilmann
7 years ago

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

johnbhartley
johnbhartley
7 years ago

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

Optimus Lime
7 years ago

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

Dan Winer
7 years ago

Thanks, very useful!

Ian
Ian
5 years ago

Thanks for this post, I couldn’t work out why IE11 was refusing to play ball!

John Hartley is a Director of Product Engineering at Beam Dental in Columbus, OH. With 5+ years of leadership experience he has worked in startups, agencies, and began his career as a freelance Front End Developer. Always looking to iterate, this blog is a place for him to share his knowledge as well as hone his craft, challenge assumptions, and build a strong base of leadership and management knowledge. Connect with him on LinkedIn

6
0
Would love your thoughts, please comment.x
()
x