<div class="quad"></div>

.quad {
  margin-top: 100px;
  margin-left: auto;
  margin-right: auto;
  width: 50px;
  height: 50px;
  background: red;
  animation: quad-back 2s;
}

.quad:hover {
/*   width: 200px;
  height: 100px; */
  animation: quad 2s forwards;
  transition: 2s;
}

@keyframes quad {
  50% {
    width: 200px;
  }
  100% {
    width: 200px;
    height: 200px;
  }
}

@keyframes quad-back {
  0% {
    width: 200px;
    height: 200px;
  }
  100% {
    width: 50px;
    height: 50px;
  }
}