Bootstrap tab bar smoothly move navigation buttons

I have a normal bootstrap tab panel for switching blocks

When switching blocks in the navigation, the active tab is highlighted

But now when I click the background of active tabs changes instantly

Is it possible to make it so that when switching tabs, the background does not change immediately, but smoothly moves left and right, depending on which tab is needed??

Can this be done with css or do i have to use js?

li {
  margin: 0;
  display: block;
}

li:before {
  display:none;
}

.nav {
  border-radius: 10px 10px 0 0;
  justify-content: center;
}

.nav > li > a {
  margin-top: 10px;
  padding: 10px 40px;
  display: block;
}

.nav-tabs > li > a {
  font-size: 18px;
  color: black;
  border: none;
  text-decoration: none;
}
.nav-tabs > li > a.active {
  margin: 10px 0;
  color: white;
  background: #A700FF;
  border-radius: 10px;
}

.info {
  padding: 30px;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>

<ul class="nav nav-tabs" role="tablist">
    <li role="presentation"> <a href="#list1" id="list1-tab" data-bs-toggle="tab" data-bs-target="#list1" role="tab" aria-controls="list1" aria-selected="true" class="active">List 1</a> </li>
    <li role="presentation"> <a href="#list2" id="list2-tab" data-bs-toggle="tab" data-bs-target="#list2" role="tab" aria-controls="list2" aria-selected="false" class="">List 2</a> </li>
    <li role="presentation"> <a href="#list3" id="list3-tab" data-bs-toggle="tab" data-bs-target="#list3" role="tab" aria-controls="list3" aria-selected="false" class="">List 3</a> </li>
    <li role="presentation"> <a href="#list4" id="list4-tab" data-bs-toggle="tab" data-bs-target="#list4" role="tab" aria-controls="list4" aria-selected="false" class="">List 4</a> </li>
</ul>
<div class="tab-content">
    <div id="list1" role="tabpanel" aria-labelledby="list1-tab" class="tab-pane active">
    <div class="info">List 1 info</div>
  </div>
    <div id="list2" role="tabpanel" aria-labelledby="list2-tab" class="tab-pane">
    <div class="info">List 2 info</div>
  </div>
    <div id="list3" role="tabpanel" aria-labelledby="list3-tab" class="tab-pane">
    <div class="info">List 3 info</div>
  </div>
    <div id="list4" role="tabpanel" aria-labelledby="list4-tab" class="tab-pane">
    <div class="info">List 4 info</div>
  </div>
</div>

from Bootstrap tab bar smoothly move navigation buttons