Does Internet Explorer Support CSS Transitions

Does Internet Explorer support CSS transitions?

The page you link to has a compatibility table.

Chrome
    1.0 (-webkit prefix)

Firefox
    4.0 (2.0) (-moz prefix)
    16.0 (16.0) (no prefix)

Internet Explorer
    10.0 (no prefix)

Opera
    10.5 (-o prefix)  
    12.0 (no prefix)

Safari
    3.2 (-webkit prefix)

There is also an article on MSDN about CSS3 transitions in Internet Explorer.

CSS transition not working in IE

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:

IE Demonstration

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: ...;

I need CSS3 transition to work in IE9

As you've properly identified, Internet Explorer 9 was the last of the IE browsers to not support the transition property, or animations. That being said, it was also the last of the IE browsers to support conditional comments, so you could conceivably put fallback code into an IE9-only conditional comment, and deliver that as your solution to all IE9 (and below) users.

<!--[if lte IE 9]>
    <script src="animation-legacy-support.js"></script>
<![endif]-->

This, of course, would only be delivered in the browser is Internet Explorer 9 or below. Now, all you have left to do is setup the jQuery animation itself. For example, we could run an image through a series of transitions like this:

(function () {

    "use strict";

    $("img.kitten")
        .animate({ width:   300 }, 1000)  // Animate to 300px wide
        .animate({ width:    50 }, 2000)  // Then, to 50px wide
        .animate({ opacity: .25 }, 1000); // Then, make it semi-transparent

}());

Each time you need to setup another keyframe, just add another call to $.fn.animate and setup your target state, as well as the animation duration.

One important thing to note is that you'll need to load in a version of jQuery that supports your target IE versions. jQuery 2.x only supports Internet Explorer 9 and up, however, jQuery 1.x supports Internet Explorer versions 6 and up.

Hope this helps!

IE10 does not support css transitions for padding?

Its not supported in IE10 i think, but works perfectly on IE11 and edge

Transition not working in IE

I suspect the issue might be compatibility mode.

If you do not have a proper doctype declaration as the very first line in a document, IE will enter compatibility mode and most features will not work as expected. Ensure that you have a valid doctype (<!DOCTYPE html> will be fine) and add <meta http-equiv="X-UA-Compatible" content="IE=edge" /> to your document <head>.

Also, make sure there is no extra whitespace before the doctype that could be introduced by the way you are echoing text in PHP.

Is there a CSS 'transform' for IE9 browsers?

Yes, IE9 supports CSS Transforms. You just have to add the -ms- prefix.

See the CanIUse website for more info.

It doesn't however, support Transitions, which I see in your CSS code in the question. If you need to support CSS transitions in IE9 (or earlier), you could use the CSS Sandpaper polyfill library.

CSS transition with IE 10

This is not so much an answer as to 'why' this happens, simply a way to deal with it... The true answer to that question is simply just that Internet Explorer is terrible.

Instead, just as a little workaround, IE seems to handle animations on other elements better than it does on text. So, my suggestion would be to take out the underscores in your spans, and just style the span elements to look the same. I've made a modified version of your pen to show this in use (code might be a bit messy as I just kind of hacked it from what you had to this, so keep in mind that there is room for improvement there)

http://codepen.io/anon/pen/DGnwt

Does Internet Explorer Support CSS Transitions