Fixing CSS3 animations in IE10 and IE11

I recently designed a site with some pretty sweet CSS3 animations. I had everything good to go in Chrome, Safari, and Firefox. But when I checked IE10 and IE11, I noticed none of my animations were working.

Problem:

CSS3 animations not firing in IE10 or IE11

Solution:

If you’re using keyframes, be sure to place them directly at the top of your external CSS stylesheet. (Placing it after an @font-face tag worked for me too.)

In my case, my stylesheet looks like this:

@font-face {
  font-family:'mycoolfont';
  src:url('../fonts/mycoolfont.eot');
  src:url('../fonts/mycoolfont.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/mycoolfont.woff') format('woff'), 
    url('../fonts/mycoolfont.ttf') format('truetype'), 
    url('../fonts/mycoolfont.svg#mycoolfont') format('svg');
  font-weight:normal;
  font-style:normal;
}

/** Keyframes **/
@-webkit-keyframes pulsate {
   0% { box-shadow: 0 0 1px #fff ; }
   100% { box-shadow: 0 0 20px #fff; }
}
@keyframes pulsate {
   0% { box-shadow: 0 0 1px #fff ; }
   100% { box-shadow: 0 0 20px #fff; }
}

a {
   -webkit-animation: pulsate 1.25s infinite alternate;
   animation: pulsate 1.25s infinite alternate;
}

This seems to do the trick!