Why doesn't the animation fire when a class is removed from a tag?

Question

css

A simple modal window. Why does the animation only play when the window is opened? and nothing happens when you close it.

// Modal
.modal-body{
  max-width: 320px;
  margin: 50px auto;
  padding: 30px 10px;
  position: relative;
  text-align: center;
  background-color: white;
  border-radius: 4px;
  visibility: visible;
  opacity: 1;
  transition: opacity .5s, visibility .5s;
  z-index: 9999;
  //close icon
  .modal-close {
    display: block;
    position: absolute;
    top: 3px;
    right: 3px;
    width: 15px;
    height: 15px;
    cursor: pointer;
    border-radius: 50%;
    transition: opacity 0.15s ease-in-out;
    &:hover {
      opacity: 0.7;
    }
    &:after,
    &:before{
      content: "";
      position: absolute;
      top: 10px;
      right: 10px;
      width: 15px;
      height: 3px;
      background-color: #333;
    }
    &:before {
      transform: rotate(-45deg);
    }
    &:after {
      transform: rotate(45deg);
    }
  }
}


.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transition: all .3s;
}

.open-modal {
  animation: BobleIt .5s;
  visibility: visible;
  opacity: 1;
  transition: all .5s;
}
.active-overlay {
  visibility: visible;
  opacity: 1;
  transition: all .3s;
}

/// Animation

@keyframes BobleIt {
  0% {width: 320px;}
  50% {width: 220px;}
  100% {width: 320px;}
}

Answer 1

I think all transitions should be on the base class, not the one that changes the styles.
The animation will only work when a class is added, not when removed.
You can try using transition with cubic-bezier instead of animation.
cubic-bezier.com/#.2,1.26,.89,-0.15