平滑地从div中删除动画

我使用@keyframes在页面上制作动画,当滚动时,将类附加到该div,当我向上滚动时,动画就会发生。我正在移除它。但当它被移除时,它会突然消失。我想让动画以平滑的方式移除,就像它被应用一样。

为了演示的目的,我附上了我的动画和 codepen 链接,在动画中,当您脱离悬停状态时,它是不平滑的。如果我没有悬停,如何使动画恢复正常? HTML

<div class="box">
  <img src="https://placeimg.com/250/250/animals" alt="">
</div>

css

.box{
  width: 300px;
  height: 300px;
  background: #DDD1B9;
  overflow: hidden;
  display: flex;
 justify-content: center;
  border-radius: 50px;
  transform: rotate(80deg);
}
img{
transform: rotate(-80deg);
}
.box:hover{
  animation-name: hoverer , imx;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  height: 200px;
}
@keyframes hoverer{
  100%{
    width: 50%;
    transform: rotate(0deg);
  }
}
@keyframes imx{
  100%{
    background: black
  }
}

编辑:该函数是一个摘录,添加和删除div如下

  fixedHeader: function(event){
      const header = document.getElementsByClassName("logo")[0]
      this.y = event.clientY
      if(this.y >= 200){
          header.classList.add("fixed") //Add the div with animate
      }else if(this.y < 200){
          header.classList.remove("fixed") //Remove the div but animated back instead of abruptly 
      }
  }