animation.css

@keyframes backInRight {
  0% {
    transform: translateX(400px) scale(1);
    opacity: 0.7;
  }

  80% {
    transform: translateX(0px) scale(1);
    opacity: 0.7;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.backInRight {
  animation: backInRight 0.5s ease forwards;
}

@keyframes backOutRight {
  0% {
    transform: translateX(0px) scale(1);
    opacity: 1;
  }

  80% {
    transform: translateX(-400px) scale(.7);
    opacity: 0.5;
  }

  100% {
    transform: scale(.5);
    opacity: 0;
  }
}

.backOutRight {
  animation: backOutRight 0.5s ease forwards;
}