Se siete ancora costretti per motivi di lavoro a supportare IE9, dovete utilizzare jQuery per gestire le transizioni CSS.
Per prima cosa impostate correttamente le classi sulla pagina:
<!DOCTYPE html>
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html class="modern-browsers"><!--<![endif]-->
<head>
Nel CSS avrete:
.fade-out {
opacity: 0;
transition: opacity 1s ease-in;
}
.fade-in {
opacity: 1;
}
IE9 ignorerà tutte le proprietà relative alle transizioni contenute nei due blocchi. Quindi con jQuery:
var isIE9 = function() {
return ( $( "html" ).hasClass( "ie9" ) );
};
$(function() {
var $faded = $( ".fade-out" );
if( !isIE9() ) {
$faded.addClass( "fade-in" );
} else {
$faded.animate({
opacity: 1
}, 1000);
}
});