internet-explorer - Imitate CSS3 transition in IE?

Question

I'm using a combination of rules to achieve the CSS3 transition rule in as cross-browser compatible a way as possible: I'm using transition, -webkit-transition, -moz-transition, and -o-transition.

Is there a similar -ms-transition property for any version of Internet Explorer? Is there a proprietary filter for older versions of IE, similar to how the following rules work for opacity in IE 6-8?

/* IE 8 */ 
-ms-filter: "progid:DXImageTransform.Microsoft. Alpha(Opacity=50)"; 
/* IE 5-7 */ 
filter: alpha(opacity=50);

Answer 1

There isn't any kind of transition effect in older versions of IE.

The only way that I know of to get anything close to it is to use JQuery's fadeIn() and fadeOut() methods, which do actually work in all versions of IE.

However, I should caution that they still fall foul of IE's notoriously poor opacity handling. JQuery's fade effects can have some weird glitches when used with IE6-8, especially if you're fading a block which contains graphics.

If you decide to try it, the code is dead simple. Simply include JQuery in your headers, and then:

$('#myelement').fadeIn();

in the appropriate place.

See the JQuery FadeIn manual page for further information.

Of course, this would be instead of any CSS transition effect; it's all done through Javascript, and you'd probably need to throw away your CSS3 transitions, or it'll clash with the JQuery effects. But if you want it to work with IE, that's the price you'll pay.

And as I say, watch out for the glitches. Test it, and see how it looks for you.

It's the only way to do it, so if you really need a transition effect in IE, that's what you'll need to do, but be prepared to accept that it may not look all that good.

Other Javascript libraries such as Mootools or Dojo may have similar effects which you could also try, but I would imagine if they do have it, they'd suffer from the same issues.

Answer 2

I ran into this while researching the same question: http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/

I also found a library called move.js, which can be used alongside CSS3 transitions: https://github.com/visionmedia/move.js

Hope this helps.

Answer 3

IE10 will have CSS3 transitions, until then you will have to use javascript.

Answer 4

CSS3 transition rule and other CSS3 rules works fine in IE 10. Prefix "-ms-" is no longer required, but will still be recognized. To ensure compatibility in the future, applications using the Microsoft vendor prefix with transition properties should be updated accordingly. So, update your CSS code, add line with rule, without any prefix.

Answer 5

for IE < 10 you can try either one of those I have not tried personally but they look promising http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/ or http://addyosmani.com/blog/css3transitions-jquery/ (broken link)