Duda con css en jQuery

[Middrel]

Hola, buenas tardes!

Tengo una duda al tratar de usar una instrucción de css en jQuery. Les explico:

Estoy tratando de hacer un pequeño menú manejado por pestañas, tab1, tab2, tab3, por ejemplo, y cada que le den click a alguna cambia un div con la información pertinente a cada una de estas. Para ello uso lo siguiente:

Código Javascript:

$(".tab1").click( function(e){
    $(".box1").css({"display":"inline","transition-duration":"1s"});
        $(".box2, .box3").css("display","none");
}
 
$(".tab2").click( function(e){
    $(".box2").css({"display":"inline","transition-duration":"1s"});
        $(".box1, .box3").css("display","none");
}
 
$(".tab3").click( function(e){
    $(".box3").css({"display":"inline","transition-duration":"1s"});
        $(".box1, .box2").css("display","none");
}
 

Sin embargo, aunque si cambian los contenidos, no se muestra el efecto de la transición "transition-duration : 1s".

Me he dado cuenta que siempre que uso "display", esta no funciona, pero en otro casos si la he podido usar. ¿Alguna razón del por qué?

¡Saludos y de antemano gracias por sus comentarios!