如何在bootstrap 4中动画列大小调整？

<div class="container">
  <div class="row">
    <div class="col">
      <!-- 列内容 -->
    </div>
    <div class="col">
      <!-- 列内容 -->
    </div>
    <div class="col">
      <!-- 列内容 -->
    </div>
  </div>
</div>

@keyframes resize-animation {
  from {
    width: 100%;
  }
  to {
    width: 50%;
  }
}

<div class="container">
  <div class="row">
    <div class="col resize-animation">
      <!-- 列内容 -->
    </div>
    <div class="col">
      <!-- 列内容 -->
    </div>
    <div class="col">
      <!-- 列内容 -->
    </div>
  </div>
</div>

<button id="resize-button">调整列大小</button>

<script>
  $(document).ready(function() {
    $("#resize-button").click(function() {
      $(".col").toggleClass("resize-animation");
    });
  });
</script>