Keyframe animations and media queries

Recently I re-developed my website (I hope you noticed!?). I’m going to be putting together a couple of short blog posts on what I learned in the process. One interesting issue I stumbled across was related to how IE 9, 10, & 11 handle @keyframe rule’s inside media queries.

As I was cross-browser testing the site across various browsers I noticed that non of the animations were working in IE. As I’d been using the excellent postCSS autoprefixer in my build process I was quite surprised by this. A quick check of caniuse.com confirmed that IE 9-11 supported 2D transforms (although IE9 requires the -ms prefix). So what was happening?

After a little bit of head scratching I finally discovered what the issue was. My @keyframe animations were sitting inside of a media query definition! I’d included the media query as I only wanted animations to render on tablet / desktop devices. Every other browser rendered the animation as you would expect, it was only IE that had the issue.

Since I was using Sass I thought I’d try wrapping the keyframe rule in an @at-root{} directive (introduced in Sass 3.3); but it was no help. The directive will only return you to the root of the media query block, not the root of the CSS (as you would expect). Anyway it was a simple fix. Just move the @keyframe rule outside of the media query block, then all browsers are happy. You can still apply the animation to the devices you want by wrapping the animation property in a media query should you wish.

Take a look at the example below and try it out in various browsers. You will notice the top cloud doesn’t animate in IE 10 - 11, but the bottom one does. You will be able to see why from the CSS tab.

This could be an easy issue to slip into if you are including any animations using mixins, as you don’t always know where they are going to be included, so worth keeping in mind.