在scrollTop函数上调用CSS Transistions

Question

我有几个div我想要缩小使用Javascript和jQuery移动填充，这确实有效....除了它不执行转换：

jQuery(window).scroll(function(){

    if (jQuery(this).scrollTop() > 200)
    {
        jQuery('.site-title').css("width", "80px", "height", "80px");
        jQuery('.main-navigation').css("padding", "2.25rem 0 0 0");
        jQuery('.search-box-wrapper').css("padding", "2.2rem 0 0 0");
    }

    if(jQuery(this).scrollTop() < 200)
    {
       jQuery('.site-title').css("width", "160px", "height", "160px");
       jQuery('.main-navigation').css("padding", "4.55rem 0 0 0");
       jQuery('.search-box-wrapper').css("padding", "4.4rem 0 0 0");
    } 
});

所以我添加了诸如'transition：padding .5s ease-in-out;'之类的内容。到原始样式但没有动画/过渡发生。实现这个目标的正确方法是什么？