使用标题中的导航链接创建平滑的动画

Question

我创建了一个标题，该标题在滚动时会缩小并淡入新徽标。当标题降低到100px高度时，我很难保持导航链接居中。我终于弄清楚了，但是现在当用户滚动时，标题缩小，导航链接跳到中心，而不是随着标题缩小而平滑过渡。我向CSS添加了不同的过渡，但是没有任何影响会影响导航链接正在执行的“跳转”。我希望我已经很好地解释了这个问题。感谢帮助。

我包括了我尝试使用的最后一个JS代码，该代码涉及更改填充以使导航保持居中，但这没有完成。

 <header>
        <div id="nav" class="navbar">
            <div id="nav_left">
                <a href="index.html">HOME</a>
                <a href="services.html">SERVICES</a>
                <a href="portfolio.html">PORTFOLIO</a>
            </div>
            <a href="index.html" id="logo" class="Claire_logo">
                <img src="images/logo_bluebird_90_cc.png" alt="logo1" id="logo_Claire_blue" class="logo"  style="display:none"/>
                <img src="images/logo_6_small.png" alt="logo2" id="logo_Claire" class="logo_main"
                />
            </a>
            <div id="nav_right">
                <a href="blog.html">BLOG</a>
                <a href="about.html">ABOUT</a>
                <a href="contact.html">GET IN TOUCH</a>
            </div>
        </div>
    </header>

#nav {
  display: flex;
  justify-content: center;
  flex-direction: row;
  height: 180px;
  /* transition: font-size .5s, height .5s, margin .5s;
  -webkit-transition: font-size .5s, height .5s;
  -moz-transition: font-size .5s, height .5s; */
}

#nav_left {
  flex: 1 0 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#nav_right {
  flex: 1 0 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

#nav_left > a {
  flex: 0 0 auto;
  text-decoration: none;
  color: rgb(96, 96, 96);
  font-family: "Lora";
  margin: 0 1.4em;
  height: 20px; 
}

#nav_right > a {
  flex: 0 0 auto;
  text-decoration: none;
  color: rgb(96, 96, 96);
  font-family: "Lora";
  margin: 0 1.4em;
  height: 20px;  
}

$(document).ready(function() {

    $(window).scroll(function() {

      var scroll = $(window).scrollTop();
      if (scroll > 10) {
        $('#logo_Claire').fadeOut(800);
        setTimeout(function() {
        $('#logo_Claire_blue').fadeIn(800);
        }, 800)
          };
      });
    });

    function scrollFunction() {
      if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
        document.getElementById("nav_left").style.padding = "10px 0";
        document.getElementById("nav_right").style.padding = "10px 0";
      } else {
        document.getElementById("nav_left").style.padding = "80px 0";
        document.getElementById("nav_right").style.padding = "80px 0";

      }
    }