.container{
  width: 100%
}

@keyframes fade-in{
  0% {opacity: 0; transform: translate(0px, 50px)}
  100% {opacity: 1;}
}

@keyframes fade-out{
  0% {opacity: 1; transform: translate(0px, 0px)}
  100% {opacity: 0; transform: translate(0px, 50px)}
}

.fade-in{
  opacity: 0;
  animation-name: fade-in;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.fade-out{
  opacity: 1;
  animation-name: fade-out;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}