I'm learning jQuery, testing its functionality, and have some problem with an example I made.

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

```js
/*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');
  });
});
```

```css
/*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;
}
```

```html
<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>
```

There are:

* 2 buttons, green and red.
* 2 sets of keyframes.
* 2 custom classes which start the animation of corresponding keyframes and applies the styles from the last keyframe.
* target div, which style I want to change on button click.

When I click on the button, it assigns a class to the target div and removes the class, assigned by another button.

**Question 1:** Why the width of the target div is changing back to 100px after the green button animation ends (why it doesn't remain 150px)? 

**Question 2:** Do I do everything right or there is a better jQuery approach?