toggle анимация при клике

document.querySelector(".toggle").onclick = function() {
  let d = document.querySelector(".box")
  d.classList.toggle("unbox")
}

.box {
  background-color: #abc;
  display: none;
  animation: drop 1s;
  width: 200px;
  height: 200px;
}

.unbox {
  background-color: #abc;
  width: 200px;
  animation: undrop 1s;
  height: 200px;
}

@keyframes drop {
  from {
    display: none;
    opacity: 0;
  }
  to {
    display: block;
    opacity: 1;
  }
}

@keyframes undrop {
  from {
    display: block;
    opacity: 1;
  }
  to {
    opacity: 0;
    display: none;
  }
}

<div class="box"></div>
<button class="toggle">Toggle</button>