Переходы CSS не работают после удаления класса

Проверьте мою скрипку, пожалуйста: https://jsfiddle.net/iqbal98/4zdh6c3g/23/

<div id="cart-circle">
      <div id="cart-content">
          <div id="cart-icon" class="text-bordered fa fa-shopping-cart"></div>
          <div id="cart-title" class="text-bordered animated bounceOutRight"></div>
      </div>
 </div>

Проблема возникает после удаления класса open-cart-circle из div (с классом cart-circle), который добавляется, когда пользователь нажимает на сам круг. open-cart-circle изменяет свойства height, width и border-bottom-left-radius, выполняемые анимацией:

@keyframes trigger-cart-circle {
  100% {
    height: 95px;
    width: 495px;
    border-bottom-left-radius: 26%; }
}

и вот как выглядит open-cart-circle:

.open-cart-circle {
  animation-delay: 0s;
  animation-duration: 0.8s;
  animation-name: trigger-cart-circle;
  animation-fill-mode: both; 
}

Поэтому, когда добавляется open-cart-circle, начинается анимация, и я хочу, чтобы вы заметили, что animation-fill-mode намеренно помещается в код, так как я хочу, чтобы "круг" плавно перемещался (переходы с 0,5 с) при открытии и закрытии стороны бар. Поскольку после закрытия боковой панели дважды, переходы CSS, похоже, не работают. Зачем? Я только что застрял...

Здесь cart-circle должен иметь переход: все потому, что этот "круг" должен "мягко" вернуться к своей первоначальной форме при закрытии:

#cart-circle {
  position: fixed;
  z-index: 999;
  box-shadow: 0 8px 11px rgba(0, 0, 0, 0.247);
  top: 0;
  right: 0;
  text-align: right;
  border-bottom-left-radius: 100%;
  border: 0.051px solid #333;
  background-color: #f1c40f;
  cursor: pointer;
  transition: all 0.5s;   /*HERE*/
}

ИЗМЕНИТЬ

У свойства will-change есть какая-либо точка для возможного решения?

Ответ 1