How to remove animations from appearing only in IE?

Question

I have a keyframe animation and I believe IE 10 is the only IE browser capable of playing this animation. How could I go about removing this animation if the browser is IE and keeping it otherwise (Chrome, Safari, FireFox)?

The animation looks like this:

// Animations
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in { 
    opacity: 0; 
    -webkit-animation: fadeIn ease-in 1; 
    -moz-animation: fadeIn ease-in 1; 
    animation: fadeIn ease-in 1; 
    -webkit-animation-fill-mode: forwards; 
    -moz-animation-fill-mode: forwards; 
    animation-fill-mode: forwards; 
    -webkit-animation-duration: .5s; 
    -moz-animation-duration: .5s; 
    animation-duration: .5s;
}
.fade-in.one { 
    -webkit-animation-delay: 0.5s; 
    -moz-animation-delay: 0.5s; 
    animation-delay: 0.5s;
}
.fade-in.two { 
    -webkit-animation-delay: 1.2s; 
    -moz-animation-delay: 1.2s; 
    animation-delay: 1.2s;
}

Fiddle http://jsfiddle.net/mkerny45/6yYC9/

make a fiddle with your markup and i'll show you how to detect ie10 — albert, Mar 30 '13 at 13:46
Animation is not working out in JSFiddle, but here it is: http://jsfiddle.net/mkerny45/6yYC9/ — Matt, Mar 30 '13 at 13:53

score 1 · Answer 1 · answered Mar 30 '13 at 14:11

use conditional comments to turn the animations off. you'll need to use javascript to attach the cc's for ie10, and it should look like this:

<!--[if !IE]><!-->  
<script> 
// detect ie10, attach class of ie10 to html element 
if(/*@cc_on!@*/false){document.documentElement.className+=' ie10';}  
</script>  
<!-->![endif]-->  
<style>  
.ie10 .animationclass{}  
</style>

you can view gist here: https://gist.github.com/jalbertbowden/5174156
working demo of script here: http://dev.bowdenweb.com/ua/browsers/ie/ie10-detection-via-cc.html

score 0 · Answer 2 · edited May 23 '17 at 11:49

0

i'v find IE10 does not read conditional comments anymore. .

so you can use jQuery:

if ($.browser.msie && $.browser.version == 10) {
  $("html").removeClass("someClass");
}

or JavaScript:

if(Function('/*@cc_on return document.documentMode===10@*/')()){
  document.documentElement.className ='';
}

edited May 23 '17 at 11:49

Community

1
1

answered Mar 30 '13 at 13:52

mehdi

1,745
2
15
21

Can I use those conditional IE tags anywhere in my html markup or only in the head? – Matt Mar 30 '13 at 13:54
styles must be in head tag. – mehdi Mar 30 '13 at 13:59
ie10 understands javascript added conditional comments, but you know that because you took my answer and pasted it into yours. weak. – albert Mar 30 '13 at 14:50

How to remove animations from appearing only in IE?

2 Answers2