CSS animation in Windows 8.1 application not working

Question

I have a CSS animation inside of an application we're working on that was working before we started upgrading it to Windows 8.1. It is a relatively simple rotation transform that intended to make an image spin. The below is our CSS which seems valid and runs fine in IE11 with a test page.

.spinner img {
  animation-name: rotate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Answer 1

It turned out nothing was wrong with the animation declaration itself, as expected. We had just wrapped the keyframes definition inside of a media query. Apparently, even though the media query was valid and was being correctly applied, neither IE11 nor Windows 8.1 would render the animation.

Long story short, moving the keyframes definition outside of the media query resolved the issue.