Imitate CSS3 transition in IE?
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);
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:
in the appropriate place.
See the JQuery FadeIn manual page for further information.
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.
I also found a library called move.js, which can be used alongside CSS3 transitions: https://github.com/visionmedia/move.js
Hope this helps.
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.