.slide-in {
  animation: slideIn 0.3s linear forwards;
}
@keyframes slideIn {
  0% {
    display: block;
    transform: translateY(-100px);
  }
  20% {
    transform: translateY(-100px);
  }
  50% {
    transform: translateY(0px);
  }
}
.slide-out {
  animation: slideOut 0.3s linear forwards;
}
@keyframes slideOut {
  0% {
    display: block;
    transform: translateY(100px);
  }
  20% {
    transform: translateY(100px);
  }
  50% {
    transform: translateY(0px);
  }
}
.fadeInRight {
  animation: fadeInRight 0.6s ease-in-out forwards;
  opacity: 0;
  animation-delay: 0.3s;
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(300px);
  }
  to {
    opacity: 1;
  }
}
.fadeInleft {
  animation: fadeInleft 0.6s ease-in-out;
}
@keyframes fadeInleft {
  from {
    opacity: 0;
    transform: translateX(-300px);
  }
  to {
    opacity: 1;
  }
}