Навигационное меню CSS с анимацией перехода

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="gonasem-navigatsu">
  <li><a href="#link">Меню</a></li>
  <li><a href="#link">Форум</a></li>
  <li><a href="#link">Файлы</a></li>
  <li><a href="#link">Скачать</a></li>
  <li><a href="#link">Блог</a></li>
  <li class="sliding-seat-1"></li>
  <li class="sliding-seat-2"></li>
</ul>

.gonasem-navigatsu {
  position: relative;
  display: flex;
  list-style: none;
  padding: 10px 20px;
  font-family: 'Roboto Condensed', sans-serif;
  text-transform: uppercase;
  margin: 20px 0 40px 0;
}
.gonasem-navigatsu a {
  position: relative;
  padding: 10px 34px;
  font-size: 20px;
  border: none;
  outline: none;
  color: #337AB7;
  display: inline-block;
  text-decoration: none;
  text-shadow: 1px 1px 0 #BFE2FF;
  z-index: 3;
}
.gonasem-navigatsu .sliding-seat-1,
.gonasem-navigatsu .sliding-seat-2 {
  position: absolute;
  display: inline-block;
  box-shadow: 4px 3px 0 #337AB7;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1.05);
  transform: skew(-20deg);
  bottom: 0px;
  height: 100%;
}
.gonasem-navigatsu .sliding-seat-1 {
  background-color: #BFE2FF;
  border: 1px solid transparent;
  z-index: 2;
}
.gonasem-navigatsu .sliding-seat-2 {
  opacity: 0;
  background-color: transparent;
  border: 1px solid #BFE2FF;
  z-index: 1;
}

$(".gonasem-navigatsu a").on("click", function () {
  let position = $(this).parent().position();
  let width = $(this).parent().width();
  $(".gonasem-navigatsu .sliding-seat-1").css({ opacity: 1, left: +position.left, width: width });
});
$(".gonasem-navigatsu a").on("mouseover", function () {
  let position = $(this).parent().position();
  let width = $(this).parent().width();
  $(".gonasem-navigatsu .sliding-seat-2").css({
  opacity: 1,
  left: +position.left,
  width: width
  });
});
$(".gonasem-navigatsu a").on("mouseout", function () {
  $(".gonasem-navigatsu .sliding-seat-2").css({ opacity: 0 });
});
let currentWidth = $(".gonasem-navigatsu").find("li:nth-of-type(1) a").parent("li").width();
let current = $(".gonasem-navigatsu li:nth-of-type(1) a").position();
$(".gonasem-navigatsu .sliding-seat-1").css({ left: +current.left, width: currentWidth });

<ul class="navigatsion">
  <li class="nupegsa1"></li>
  <li class="nupegsa2"></li>
<li><a class="active" href="#link">Главная</a></li>
  <li><a href="#link">Файлы </a></li>
  <li><a href="#link">Стиль</a></li>
  <li><a href="#link">Дизайн</a></li>
  <li><a href="#link">CSS</a></li>
</ul>

.navigatsion {
  display: inline-flex;
  background: #FFF;
  position: relative;
  list-style: none;
  padding: 10px 20px;
  justify-content: center;
  font-family: 'Roboto Condensed', sans-serif;
  text-transform: uppercase;
  margin: 20px 0 40px 0;  
  border-radius: 40px;
  box-shadow: 10px 20px 30px #00000044;
  border: 4px solid #BFE2FF;
}
.navigatsion li a {
  position: relative;
  padding: 10px 34px;
  font-size: 20px;
  line-height: 1.4;
  border: none;
  color: #337AB7;
  display: inline-block;
  text-decoration: none;
  z-index: 3;
}
.navigatsion .nupegsa1,
.navigatsion .nupegsa2 {
  position: absolute;
  display: inline-block;
  height: 48px;
  border-radius:30px;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1.05);
}
.navigatsion .nupegsa1 {
  background-color: #BFE2FF;
  z-index: 2;
}
.navigatsion .nupegsa2 {
  opacity: 0;
  background: #fff;
  border: 1px solid #337AB7;
  z-index: 1;
}
.squeeze {
  transition: all 1.5s;
  transform: scale(0.9);
}

$(".navigatsion a").on("click", function() {
  let position = $(this)
  .parent()
  .position();
  let width = $(this)
  .parent()
  .width();
  $(".navigatsion .nupegsa1").css({ opacity: 1, left: +position.left, width: width });
});
$(".navigatsion a").on("mouseover", function() {
  let position = $(this)
  .parent()
  .position();
  let width = $(this)
  .parent()
  .width();
  $(".navigatsion .nupegsa2")
  .css({
  opacity: 1,
  left: +position.left,
  width: width
  })
  .addClass("squeeze");
});
$(".navigatsion a").on("mouseout", function() {
  $(".navigatsion .nupegsa2")
  .css({ opacity: 0 })
  .removeClass("squeeze");
});
let currentWidth = $(".navigatsion")
.find(".active")
.parent("li")
.width();
let current = $(".navigatsion .active").position();
$(".navigatsion .nupegsa1").css({ left: +current.left, width: currentWidth });

<nav class="godepovsa">
  <ul>
  <li><a class="akuvsan" href="#link">Главная</a></li>
<li><a href="#link">Файлы </a></li>
  <li><a href="#link">Стиль</a></li>
  <li><a href="#link">Дизайн</a></li>
  <li><a href="#link">CSS</a></li>  
  </ul>
</nav>

.godepovsa {
  position: relative;
  padding: 10px 20px;
  font-family: 'Roboto Condensed', sans-serif;
  text-transform: uppercase;
  margin: 20px 0 40px 0;  
  display: flex;
  justify-content: center;  
}
.godepovsa .line {
  height: 2px;
  position: absolute;
  bottom: 0;
  margin: 10px 0 0 0;
  background: #337AB7;
}
.godepovsa ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
}
.godepovsa ul li {
  margin: 0 40px 0 0;
  transition: all 0.4s ease;
}
.godepovsa ul li:last-child {
  margin: 0;
}
.godepovsa ul li a {
  color: #337AB7;
  display: block;
  font-size: 20px;
  text-decoration: none;
}
.godepovsa ul li:hover a,
.godepovsa ul li.akuvsan a {
  color: #000;
  text-decoration: none;
}

let nav = $('.godepovsa');
let line = $('<div />').addClass('line');
line.appendTo(nav);
let akuvsan = nav.find('.akuvsan');
let pos = 0;
let wid = 0;
if(akuvsan.length) {
  pos = akuvsan.position().left;
  wid = akuvsan.width();
  line.css({
  left: pos,
  width: wid
  });
}
nav.find('ul li a').click(function(e) {
  e.preventDefault();
  if(!$(this).parent().hasClass('akuvsan') && !nav.hasClass('animate')) {
  nav.addClass('animate');
  let _this = $(this);
  nav.find('ul li').removeClass('akuvsan');
  let position = _this.parent().position();
  let width = _this.parent().width();
  if(position.left >= pos) {
  line.animate({
  width: ((position.left - pos) + width)
  }, 300, function() {
  line.animate({
  width: width,
  left: position.left
  }, 150, function() {
  nav.removeClass('animate');
  });
  _this.parent().addClass('akuvsan');
  });
  } else {
  line.animate({
  left: position.left,
  width: ((pos - position.left) + wid)
  }, 300, function() {
  line.animate({
  width: width
  }, 150, function() {
  nav.removeClass('animate');
  });
  _this.parent().addClass('akuvsan');
  });
  }
  pos = position.left;
  wid = width;
  }
});