@keyframes up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes right-transition {
  from {
    opacity: 0;
    transform: translateX(-200px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes opacity-transition {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-right {
  animation-name: right-transition;
  animation-duration: 500ms;
  animation-fill-mode: backwards;
}

.animate-up {
  animation-name: up;
  animation-duration: 500ms;
  animation-fill-mode: backwards;
}

.animate-opacity {
  animation-name: opacity-transition;
  animation-duration: 500ms;
  animation-fill-mode: backwards;
}