I am using jquery to add css to a div, it works well when I add just one css property

here is the code;

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

However if add more than one css property, it stops working;

here is the code;

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');
    }
});

I looking to add transition to slow the speeed of background color change.