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!
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!
Cheers! Have been scratching my head over that one for a while now, and your fix does the job nicely! 🙂
Worked for me as well; put it right after the font tags (and after a LESS vars import).
Thank you very much for this great hint. You made my Friday night super happy 🙂
Well, at least the support is there.
Thanks for figuring this out!
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
Thank you. You are a life saviour. I spent a lot of time looking for it.
Thank you very much!!!
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
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