Centrally aligned CSS animation is not symmetrical despite setting width:100% left:0-CodePudding

I'm using bootstrap 5.0.2

Animation of a button suppose to resize button symmetricaly from center to both left and right to 100% available width. It doesn't work as suppose to because it goes beyond the lines of symmetry (right size is too wide)

I don't understand why because:

<!--bootstrap-->

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

<!--code-->

<div >
  <div >

    <div >
      <a target="_blank" href="velo-art" >
        test
      </a>
    </div>
    <div >
      <a target="_blank" href="velo-art" >
        test_2
      </a>
    </div>
    <div >
      <a target="_blank" href="velo-art" >
        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>

CodePudding user response：

The parent <div> of each <a>nchor has m-2 class which is margin: 0.5rem (See Figure I).

Figure I

                            <!-- ⬍ 0.5rem -->
<!-- ⬌ 0.5rem --> <div ></div> <!-- ⬌ 0.5rem -->
                            <!-- ⬍ 0.5rem -->

So there are left and right margins that offset the actual position of the <div>s hence the asymmetrical behavior. Change each m-2 class to mx-0 to remove the left and right margins and add my-2 in order to preserve the 0.5rem between each <div> (See example below).

The following example has:

class m-2 assigned to the first <div>
class mx-1 and my-2 assigned to the second <div>
class mx-0 and my-2 assigned to the third <div>

Note the difference in offset from each of their center position. The third <div> is the correct class to use. Also note that the second and third <div> has my-2 which is margin: 0.5rem 0 (top and bottom margins at 0.5rem). FYI the example also shows how a complete Bootstrap document should be arranged.

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .w-animate {
      position: relative;
      width: 50%;
      animation: center-animate 1s ease infinite alternate;
    }
    
    .w-animate:hover {
      animation-play-state: paused;
    }
    
    @keyframes center-animate {
      0% {
        width: 50%;
        left: 25%;
      }
      100% {
        width: 100%;
        left: 0%;
      }
    }
  </style>
  </head>
  <body>
  <div >
    <div >
      <div >
        <a target="_blank" href="velo-art" >
         m-2
      </a>
      </div>
      <div >
        <a target="_blank" href="velo-art" >
          mx-1 my-2
      </a>
      </div>
      <div >
        <a target="_blank" href="velo-art" >
          mx-0 my-2
      </a>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  </body>

</html>