Estoy usando jquery para agregar css a un div, funciona bien cuando agrego solo una propiedad css

aquí está el código;

 jQuery(window).on('scroll', function() { if(jQuery(window).scrollTop() > 60) { jQuery('#myheader2').css('background-color', '#fff'); } else { jQuery('#myheader2').css('background-color', '#fff'); } });

Sin embargo, si agrega más de una propiedad css, deja de funcionar;

aquí está el código;

 jQuery(window).on('scroll', function() { if(jQuery(window).scrollTop() > 60) { jQuery('#myheader2').css({'background-color': '#fff','transition': 'background-color 3s';}); } else { jQuery('#myheader2').css('background-color', '#0b0b22'); } });

Busco agregar transición para reducir la velocidad del cambio de color de fondo.