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