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.

Blumonde · Answer

Bhuvanesh Mohankumar : Thanks for the suggestion..but still no luck.

Bhuvanesh Mohankumar · Answer

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/

Blumonde · Answer

I hear that jquery can hack IE transitions issues on background images. Any suggestion/advise anyone? Thank you for reviewing this case.

Blumonde · Answer

Bhuvanesh Mohankumar : I tested it and it didn't work in my case. No effects at all. Thanks anyway.

Bhuvanesh Mohankumar · Answer

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.