CSS transition not working in IE

Question

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 reason that it would work in either IE or firefox.
I've tried this using -ms-transition and it yields the same results, but the site uses CSS3 anyway so shouldn't need the -ms- anyway from what I've read.
Any light that can be shed would be greatly appreciated!
Ben

CSS:

.XMABAN {   
    height: 153px;  
    width: 230px;  
    background-color:rgb(127,0,25);  
    padding: 0;  
    vertical-align: top;  
}

.XMABAN a {  
    height: 153px;  
    width: 230px;  
    text-decoration:none;  
}

.XMABAN a:hover         {   
    text-decoration:none;   
}

.XMABAN img             {   
    opacity: 1;  
    transition: opacity 0.70s ease-in-out;   
    -moz-transition: opacity 0.70s ease-in-out;  
    -webkit-transition: opacity 0.70s ease-in-out; 
    -o-transition: opacity 0.70s ease-in-out; 
}

.XMABAN a:hover img     {   
    opacity: 0.30;  
    transition: opacity 0.25s ease-in-out;  
    -moz-transition: opacity 0.25s ease-in-out;  
    -webkit-transition: opacity 0.25s ease-in-out;  
    -o-transition: opacity 0.25s ease-in-out;  
}

.XMABAN span            {   
    position: relative;  
    left: 0%;  
    top: -62%;  
    font-weight:bold;  
    font-size:20pt;  
    color:#404040;  
    transition: color 0.70s ease-in-out;  
    -moz-transition: color 0.70s ease-in-out;  
    -webkit-transition: color 0.70s ease-in-out;  
    -o-transition: color 0.70s ease-in-out;  
}

.XMABAN a:hover span    {   
    color:#FFF0F5;  
    transition: color 0.25s ease-in-out;  
    -moz-transition: color 0.25s ease-in-out;  
    -webkit-transition: color 0.25s ease-in-out;  
    -o-transition: color 0.25s ease-in-out;  
}

HTML:

<tr>
    <td style="width: 33%;">
        <div class="XMABAN" style="margin: 10px 0px 5px 0px;">
            <a class="DSPI" href="online.asp">
                <img src="../images/PRM_220.jpg">
                <span>TEXT</span>
            </a>
        </div>
    </td>
</tr>

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