css - Fade In doesn't work on IE -

i using code fade-in images when page loads. works fine in browsers have tested except ie on windows.

@-webkit-keyframes fadein { { opacity:0; } { opacity:1; } } @-moz-keyframes fadein { { opacity:0; } { opacity:1; } } @keyframes fadein { { opacity:0; } { 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:1.5s;-moz-animation-duration:1.5s;animation-duration:1.5s;}  .fade-in.one {-webkit-animation-delay: 0.3s;-moz-animation-delay: 0.3s;animation-delay: 0.3s;} .fade-in.two {-webkit-animation-delay: 0.6s;-moz-animation-delay:0.6s;animation-delay: 0.6s;} .fade-in.three {-webkit-animation-delay: 0.9s;-moz-animation-delay: 0.9s;animation-delay: 0.9s;} 

any ideas?

you using this method , has warning ie:

warning! css3 code work on firefox, chrome, safari , maybe newer versions of ie (after version 9)

since ie9 doesn’t support css3 animations support opacity: 0; property have have ie9 load separate ie9 css have fade classes set opacity: 1

if looking alternative:

method 1:

if looking self-invoking transition should use css3 animations, aren't supported kind of thing made for.

css

#test p {     margin-top: 25px;     font-size: 21px;     text-align: center;      -webkit-animation: fadein 2s; /* safari, chrome , opera > 12.1 */        -moz-animation: fadein 2s; /* firefox < 16 */         -ms-animation: fadein 2s; /* internet explorer */          -o-animation: fadein 2s; /* opera < 12.1 */             animation: fadein 2s; }  @keyframes fadein {     { opacity: 0; }       { opacity: 1; } }  /* firefox < 16 */ @-moz-keyframes fadein {     { opacity: 0; }       { opacity: 1; } }  /* safari, chrome , opera > 12.1 */ @-webkit-keyframes fadein {     { opacity: 0; }       { opacity: 1; } }  /* internet explorer */ @-ms-keyframes fadein {     { opacity: 0; }       { opacity: 1; } }  /* opera < 12.1 */ @-o-keyframes fadein {     { opacity: 0; }       { opacity: 1; } } 

demo

• http://jsfiddle.net/so_amk/vv2ek/

browser support

all modern browsers, ie 10+: http://caniuse.com/#feat=css-animation

method 2:

alternatively, can use jquery (or plain js, see third code block) change class on load:

jquery

$("#test p").addclass("load");​ 

css

#test p {     opacity: 0;     font-size: 21px;     margin-top: 25px;     text-align: center;      -webkit-transition: opacity 2s ease-in;        -moz-transition: opacity 2s ease-in;         -ms-transition: opacity 2s ease-in;          -o-transition: opacity 2s ease-in;             transition: opacity 2s ease-in; }  #test p.load {     opacity: 1; } 

plain js (not in demo)

document.getelementbyid("test").children[0].classname += " load"; 

demo

• http://jsfiddle.net/so_amk/a9dnw/

browser support

all modern browsers, ie 10+: http://caniuse.com/#feat=css-transitions

method 3:

or, can use method .mail uses:

jquery

$("#test p").delay(1000).animate({ opacity: 1 }, 700);​ 

css

#test p {     opacity: 0;     font-size: 21px;     margin-top: 25px;     text-align: center; } 

demo

• http://jsfiddle.net/so_amk/a9dnw/3/

browser support

jquery 1.x: modern browsers, ie 6+: http://jquery.com/browser-support/
jquery 2.x: modern browsers, ie 9+: http://jquery.com/browser-support/

this method cross-compatible target browser not need support css3 transitions or animations.

source