Плавный переход с использованием CSS и Jquery

Question

Я использую jQuery для изменения размера элемента header в фиксированном заголовке в зависимости от местоположения прокрутки.Я получил свой код, чтобы внести изменения, как я хочу, но изменение скорее резкое, чем плавное.Я понимаю, что мне нужно использовать свойство transition в CSS, но я не могу понять, где и как это сделать.Небольшая помощь будет оценена.

$(window).scroll(function() {
  if ($(window).scrollTop() > 200) {
    $('.bg').addClass('show')
    $('#headerTitle').css("font-size", "1.5em");
  } else {
    $('.bg').removeClass('show')
    $('#headerTitle').css('font-size', "2em")
  };
});

$('.scroll').on('click', function(e) {
  e.preventDefault()

  $('html, body').animate({
    scrollTop: $(this.hash).offset().top
  }, 1000);
});

.transition {
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.show {
  background-color: #000;
  width: 100%;
  height: 8.5em;
  opacity: 0.8;
}

#headerTitle {
  font-size: 2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="bg transition">
  <p style="width: 60%; margin-left: 20%; border-bottom: 1px solid #FFF; padding-bottom: 1em;">
    <span id="headerTitle">Joe Blow</span>
  </p>
</header>

Answer 1

Вам необходимо включить transition свойства в стиле заголовка:

#headerTitle {
font-size: 2em;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}