Transition effect not working jquery

i'm creating a navbar and i'm changing the font size of a brand when scroll top is greater than 10 as you can see below . i just wanna make brand font size small or bigger smoothly. just like transitions in css3 . is there any efficient way of doing that???

 var a = $(".navbar-default").offset().top;
 $(document).on('scroll', function() {
  if ($(this).scrollTop() > 10) {
    $('.navbar-default').addClass("scrolled");
    $('.navbar-brand').css({"font-size":"20px"});
  } else {
    $('.navbar-default').removeClass("scrolled");
    $('.navbar-brand').css({"font-size":"26px"});
  }
});

HTML

   <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand-font-size navbar-brand scroll" href="#home">Shopify</a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav text-center" style="position:relative;left:300px;">
          <li><a class="scroll" href="#about">Home</a></li>
          <li><a class="scroll" href="#portfolio">Accessories</a></li>
          <li><a class="scroll" href="#clients">Men</a></li>
          <li><a class="scroll" href="#team">Women</a></li> 
          <li><a class="scroll" href="#blog">FAQ's</a></li>
          <li><a class="scroll" href="#contact">Order Now</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right icons">
          <li class="icon-border"><a href="#"><i class="fa fa-search icons-size"></i></a></li>
          <li class="icon-border"><a href="#"><i class="fa fa-shopping-cart icons-size"></i></a></li>
          <li class="icon-border"><a href="#"><i class="fa fa-align-justify icons-size"></i></a></li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>