@keyframes fadeIn {
  0% {
    display: block;
    opacity: 0;
  }

  1% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  99% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    display: none;
  }
}

.box {
  width: 100px;
  height: 100px;
  background-color: #000;
  margin: 100px auto;
  animation: fadeIn 3s forwards;
}

.box.fadeOut {
  animation:  fadeOut 3s forwards;
}