html - 平滑地从 div 中移除动画

Question

我正在使用@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 
      }
  }

Answer 1

像下面这样使用转换:

function change() {
  document.querySelector('.box').classList.toggle('fixed');
}

.box {
  width: 300px;
  height: 300px;
  background: #DDD1B9;
  overflow: hidden;
  display: flex;
  justify-content: center;
  border-radius: 50px;
  transform: rotate(80deg);
  transition: 0.5s all;
}

img {
  transform: rotate(-80deg);
}

.box.fixed {
  width: 50%;
  transform: rotate(0deg);
  height: 200px;
  background: black
}

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

<button onClick="change()">toggle class</button>