.page-transition {
  opacity: 1;
  transition:
    opacity var(--transition-page) ease,
    transform var(--transition-page) ease;
}

.page-transition.is-leaving,
.page-transition.is-entering,
.page-transition.is-visible {
  will-change: opacity, transform;
}

.page-transition.is-leaving {
  opacity: 0;
  transform: translateY(10px);
}

.page-transition.is-entering {
  opacity: 0;
  transform: translateY(-10px);
}

.page-transition.is-visible {
  opacity: 1;
  transform: none;
}