CSS Transitions not working for IE

Question

My website displays different background images with transitions setting in the CSS body below:

 

body {

    padding-top: 70px;

    margin: 0;

    background-repeat: no-repeat;

    background-size: 100%;

  

    opacity: 1.0;

    -moz-transition: background 1.5s linear;

    -webkit-transition: background 1.5s linear;

    -o-transition: background 1.5s linear;

      transition: all 5s linear 1s;

}

 

The transitions setting above works great in Chrome. However, it shows no animation effects in IE when transition from one image to another. 

 

I have googled the web on IE transitions but nothing helps so far.

 

Please advise. Thank you. 

 

 

Answer 1

<h4><a data-userid="e5bad3" href="http://www.c-sharpcorner.com/members/bhuvanesh-mohankumar" style="outline: none 0px; text-decoration: none; cursor: pointer; font-weight: normal; font-family: Roboto, sans-serif; color: #01a821 !important;">Bhuvanesh Mohankumar</a>: Thanks for the suggestion..but still no luck.</h4><div></div>

Answer 2

Hi Blumonde,

Just take a look at this site, Hope can give some clue for your issue,

http://www.kevinleary.net/jquery-fadein-fadeout-problems-in-internet-explorer/

Answer 3

I hear that jquery can hack IE transitions issues on background images.

Any suggestion/advise anyone? Thank you for reviewing this case.

Answer 4

<h4><a data-userid="e5bad3" href="http://www.c-sharpcorner.com/members/bhuvanesh-mohankumar" style="outline: none 0px; text-decoration: none; cursor: pointer; font-weight: normal; font-family: Roboto, sans-serif; color: #01a821 !important;">Bhuvanesh Mohankumar</a>: I tested it and it didn't work in my case. No effects at all. Thanks anyway.</h4>

Answer 5

Actually IE don't support all kinds of effects like chrome, you need to define hack explicitly.

Here is a sample Hack for on mouse over image transition, may help you ,

HTML:

<div id="cf"> <img class="bottom" src="/images/Windows%20Logo.jpg" /> 

  <img class="top" src="/images/Turtle.jpg" /> 

</div>

CSS:

#cf {   position:relative;   height:281px;   width:450px;   margin:0 auto; }  

#cf img {   position:absolute;   left:0; -webkit-transition: opacity 1s ease-in-out; 

-moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out;  

 transition: opacity 1s ease-in-out; }  

#cf img.top:hover {   opacity:0; }

Mark as answer, if helpful.