Html 尽管设置了 width：100% left：0，但居中对齐的 CSS 动画并不对称

我使用Bootstrap 5.0.2

按钮的动画应该从中心到左右对称地调整按钮的大小，使其达到100%可用宽度.它不能像预期的那样工作，因为它超出了对称线(合适的尺寸太宽了)

我不明白为什么，因为:

<!--bootstrap-->

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<!--code-->

<div class="container bg-success">
  <div class="border border-dark">

    <div class="row m-2 w-animate">
      <a target="_blank" href="velo-art" class="btn bg-animate border border-dark rounded-pill fs-1 col-12  text-center p-2">
        test
      </a>
    </div>
    <div class="row m-2 w-animate">
      <a target="_blank" href="velo-art" class="btn bg-animate border border-dark rounded-pill fs-1 col-12  text-center p-2">
        test_2
      </a>
    </div>
    <div class="row m-2 w-animate">
      <a target="_blank" href="velo-art" class="btn bg-animate border border-dark rounded-pill fs-1 col-12  text-center p-2">
        test_3
      </a>
    </div>
    
  </div>
</div>

<style>
.w-animate {
  position: relative;
  width: 50%;
  left: 25%;
  animation: center-animate 3s ease infinite alternate;
}
.w-animate:hover {
  animation-play-state: paused;
}

@keyframes center-animate {
  0% {
    width: 50%;
    left: 25%;
  }
  100% {
    width: 100%;
    left: 0%;
  }
}
</style>