IE Bug: Keyframe Animations Inside a Media Query Block

I must confess that IE 11 is a reasonable browser. Microsoft has done some good work recently and has been quite active with the open web in the last couple of years.

Well, here's a bug to put a dampener on your festive spirits. If you ask me, the worst kind of bugs are for those properties or modules that a browser claims to support, but not entirely so. Thankfully, there's a simple workaround for this particular one, if your use case is simple. I decided to blog about it, just in case it helps save someone's time.

IE has supported CSS keyframe animations since IE 10. However, I recently discovered a bug in the latest version (IE 11), while working on implementing a responsive redesign of a fixed-width site. The designer requested an animation on one UI module only on wider screens. I would not consider this an unreasonable request.

Which led to my encounter with the IE bug. Took me a while to figure out what was going on. I filed a bug on the IE bug tracker here (I last checked the link on July 30, 2023 and it's no longer valid).

You can test the CodePen demo below in IE and other browsers. I've set a media query at min-width: 600px, inside which the animation lives. To cut a long story short, keyframe animations don't work inside media query blocks in any version of IE.