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!

12 comments on “Fixing CSS3 animations in IE10 and IE11

  1. Nick on

    It is really awful, to have keyframes at top of the css, because if anyone use sass for instance, that becomes a huge problem. IE still behaves even on the edge’s versions so badly that makes me disgust it once again… Thank you anyway for the solution!

    Reply
  2. Manny Muriel on

    The keyframes still wont necessarily work on IE11 if on top of the stylesheet. They need to be right next to the class block the keyframe is animating. And they also cannot be inside a media query. So if you are adding different animations for each media query and there are multiple animations in your page, you need to start a whole separate media query for each animation next to the class being animated. Check out my CSS at the bottom as an example…

    https://mannymuriel.com/mmstyle.css

    Reply
  3. BestDominick on

    I have noticed you don’t monetize your site, don’t waste your traffic, you can earn additional cash every month because you’ve got hi quality content.
    If you want to know how to make extra money, search for: Ercannou’s essential adsense alternative

    Reply
  4. BestReggie on

    I see you don’t monetize your site, don’t waste your traffic, you can earn additional bucks every month.
    You can use the best adsense alternative for any type of website (they approve all websites), for more info simply search in gooogle:
    boorfe’s tips monetize your website

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *