CSS Transitions not working for IE

Blumonde

10y1k.NET

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.

5 Replies

Know the answer? Post it — somebody with the same question will find it here.

Blumonde10y ago
Bhuvanesh Mohankumar: Thanks for the suggestion..but still no luck.
0
Bhuvanesh Mohankumar10y ago
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/
0
Blumonde10y ago
I hear that jquery can hack IE transitions issues on background images.
Any suggestion/advise anyone? Thank you for reviewing this case.
0
Blumonde10y ago
Bhuvanesh Mohankumar: I tested it and it didn't work in my case. No effects at all. Thanks anyway.
0

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:

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

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

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.