애니메이션이 끝난 후 요소의 너비가 변경되는 이유는 무엇입니까?

/*remove animate2 class and assign animate1 class to target*/
$(function() {
  $('#trigger').on('click', function() {
    $('#target').removeClass('animate2');
    $('#target').addClass('animate1');
  });
});

/*remove animate1 class and assign animate2 class to target*/
$(function() {
  $('#trigger2').on('click', function() {
    $('#target').removeClass('animate1');
    $('#target').addClass('animate2');
  });
});

/*just a container around*/

#container {
  margin: 10px;
  width: 350px;
  height: 350px;
  border: solid green 1px;
}


/*green button*/

#trigger {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background-color: green;
  margin: 20px auto;
}


/*red button*/

#trigger2 {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background-color: red;
  margin: 20px auto;
}


/*Target div which will be changing*/

#target {
  width: 100px;
  height: 100px;
  border: solid blue 1px;
  margin: 10px auto;
}


/*Keyframes for green button*/

@keyframes myfirst {
  0% {
    background: white;
    width: 100px;
    height: 100px;
    border-radius: 0%;
  }
  100% {
    background: blue;
    width: 150px;
    border-radius: 100%;
  }
}


/*Keyframes for red button*/

@keyframes mysecond {
  0% {
    background: blue;
    width: 150px;
    border-radius: 100%;
  }
  100% {
    background: white;
    width: 100px;
    height: 100px;
    border-radius: 0%;
  }
}


/*cusstom class to be assigned by green button*/

.animate1 {
  -webkit-animation: myfirst 3s;
  animation: myfirst 3s;
  height: 100px;
  background: blue;
  width: 150px;
  border-radius: 100%;
  margin: 10px auto;
}


/*cusstom class to be assigned by red button*/

.animate2 {
  -webkit-animation: mysecond 3s;
  animation: mysecond 3s;
  height: 100px;
  width: 150px;
  border: solid red 1px;
  border-radius: 0%;
  margin: 10px auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="trigger"></div>
  <div id="trigger2"></div>
  <div id="target"></div>
</div>