Transition between heights by toggling a class?

Question

I want to animate a div to maximize and minimize it (increase height - decrease height) with css and jquery. I have this classes, the unique class that is not permanent is the kf-mini, this class is toggled by jquery when the div is clicked. My problem comes when this animation works to minimize but not to maximize. Any idea. alguna idea how to resolve this?

 $(".kf-child").on('click', function() {
        $(".kf-child").toggleClass("kf-mini");
      });

 .kf-cont {
      position: fixed;
      right: 50px;
      bottom: 0;
      background-color: rgb(61, 88, 152);
      width: 260px;
      height: 40px;
    }
    
    .kf-child{
      position: absolute;
      width: 90%;
      height:230px;
      background-color: rgba(38, 240, 125, .5);
      bottom: 0;
      right: 14px;
      transition: .3s ease;
    }
    
    .kf-mini{
      animation-name: transition;
        animation-duration: .3s;
        animation-fill-mode: forwards;
    }
    
    @keyframes transition {
      0% { height: 230px;}
      100% { height: 40px;}
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="kf-cont">
      <div class="kf-child">  <!-- toggle the class kf-mini here. -->
    
      </div>
    </div>

Answer 1

Would this be an acceptable solution?

$(".kf-child").on('click', function() {
    $(".kf-child").toggleClass("kf-mini");
  });
 

.kf-cont {
  position: fixed;
  right: 50px;
  bottom: 0;
  background-color: rgb(61, 88, 152);
  width: 260px;
  height: 40px;
}

.kf-child{
  position: absolute;
  width: 90%;
  height:230px;
  background-color: rgba(38, 240, 125, .5);
  bottom: 0;
  right: 14px;
  transition: height .3s ease;
}

.kf-mini{
  height: 60px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="kf-cont">
  <div class="kf-child">  // <<-- toggle the class kf-mini here.

  </div>
</div>