Css Transition Not Working In Ie

I cant get this transition working in IE or Firefox, It looks fine in Safari and Chrome. The opacity shows but is instant. To me the below CSS looks right and I can't see any reaso

Solution 1:

CSS Transitions are not supported in IE9 or lower. They are supported in IE10, however, and the CSS you've included does work correctly in IE10.

I can only assume you're using IE10 with IE9 standards to test this, which is why the transition isn't working. To change this, simply set IE's Document Mode to Standards:

It's also worth noting that you should always include vendor prefixing before the intended CSS property. Specifying transition before -webkit-transition, for instance, will tell WebKit-based browsers to use the prefixed version instead of the actual version, and there may be differences in how each are handled. Change your CSS to:

-moz-transition: ...;
-webkit-transition: ...;
-o-transition: ...;
transition: ...;