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.


CSS3 animations not firing in IE10 or IE11


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 {
  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');

/** 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!

Comments are closed.