Почему ширина элемента изменяется после окончания анимации?

Question

Я изучаю jQuery, тестирую его функциональность и у меня возникли проблемы с примером, который я сделал.

https://codepen.io/MaxVelichkin/pen/pBJeZy

/*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>

Имеется:

• 2 кнопки, зеленая и красная.
• 2 набора ключевых кадров,
• 2 пользовательских класса, которые запускают анимацию соответствующих ключевых кадров и применяют стили из последнего ключевого кадра.
• target div, стиль которого я хочу изменить при нажатии кнопки.

Когда я нажимаю кнопку, он назначает класс целевому элементу div и удаляет класс, назначенный другой кнопкой.

Вопрос 1: Почему ширина целевого элемента divвозвращается к 100px после того, как анимация зеленой кнопки заканчивается (почему она не остается 150px)?

Вопрос 2: Я все делаю правильно или есть лучший подход jQuery?

Answer 1

Ваш #target имеет преимущество, так как это селектор идентификатора.Это имеет ширину 100px.Ваш класс animate1 перезаписывается, поэтому вы не видите 150px.

Answer 2

вы можете кодировать эту анимацию: myfirst 3s forwords;