似乎有一个垂直和水平的“跳跃”发生。
对于垂直跳转，我认为您需要在flex容器上使用align-items: baseline。
对于水平跳跃，根本原因似乎是font-weight转换。不幸的是，没有variable fonts，一个真正流畅的动画是不可能的（并且最初的问题要求不要改变字体）。但是，使用text-shadow可以实现 * 相似 *（不完全相同）的效果。这个解决方案的最初想法来自this answer。
上面列出的两种解决方案都在下面的代码片段中演示。

.nav-list {
  padding: 0;
  margin: 0;
  display: flex;
  list-style: none;
  align-items: baseline;
}

.navlist__item:first-child > .nav-list__link {
  padding-left: 0;
}

.nav-list__item:last-child > .nav-list__link {
  padding-right: 0;
}

.nav-list__link {
  display: inline-block;
  color: inherit;
  font-size: 17px;
  text-decoration: none;
  padding: 15px 19px;
}

.nav-list__link:focus {
  color: #8428f8;
  text-shadow:
    -0.2px -0.2px 0 #8428f8,
    0.2px -0.2px 0 #8428f8,
    -0.2px 0.2px 0 #8428f8,
    0.2px 0.2px 0 #8428f8;
  transition: all 0.3s;
}

<nav class="nav">
  <ul class="nav-list">
    <li class="nav-list__item">
      <a class="nav-list__link" href="#about">About me</a>
    </li>
    <li class="nav-list__item">
      <a class="nav-list__link" href="#experience">Experience</a>
    </li>
    <li class="nav-list__item">
      <a class="nav-list__link" href="#skills">Skills</a>
    </li>
    <li class="nav-list__item">
      <a class="nav-list__link" href="#projects">Projects</a>
    </li>
    <li class="nav-list__item">
      <a class="nav-list__link" href="#cv">CV</a>
    </li>
  </ul>
</nav>

要去除点击链接时的跳跃效果，可以添加 outline：无; 到 。nav-list__link：focus selector。如果不是，请更改或删除 * 转换：所有0.3s;*

为了防止这种行为，您可以将transform属性用于scale。你可以在MDN上阅读更多。
片段：

.nav-list {
  padding: 0;
  margin: 0;
  display: flex;
  list-style: none;
}

.navlist__item:first-child > .nav-list__link {
  padding-left: 0;
}

.nav-list__item:last-child > .nav-list__link {
  padding-right: 0;
}

.nav-list__link {
  display: inline-block;
  color: inherit;
  font-size: 17px;
  text-decoration: none;
  padding: 15px 19px;
}

.nav-list__link:focus {
  color: #8428f8;
  /*
  font-weight: 800;
  font-size: 16px;
  */
  transform: scale(1.1); 
  transition: all 0.3s;
}

<nav class="nav">
  <ul class="nav-list">
    <li class="nav-list__item">
      <a class="nav-list__link" href="#about">About me</a>
    </li>
    <li class="nav-list__item">
      <a class="nav-list__link" href="#experience">Experience</a>
    </li>
    <li class="nav-list__item">
      <a class="nav-list__link" href="#skills">Skills</a>
    </li>
    <li class="nav-list__item">
      <a class="nav-list__link" href="#projects">Projects</a>
    </li>
    <li class="nav-list__item">
      <a class="nav-list__link" href="#cv">CV</a>
    </li>
  </ul>
</nav>