@view-transition { navigation: auto; }

/* Customize the default animation behavior */
::view-transition-group(root) {
    animation-duration: 0.5s;
}

/* Create a custom animation */
@keyframes move-out {
    from {
        transform: translateY(0%);
    }

    to {
        transform: translateY(-100%);
    }
}

@keyframes move-in {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0%);
    }
}

/* Apply the custom animation to the old and new page states */
::view-transition-old(root) {
    animation: 0.4s ease-in both move-out;
}

::view-transition-new(root) {
    animation: 0.4s ease-in both move-in;
}

figcaption {
  view-transition-name: h1;
}

@keyframes grow-x {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes shrink-x {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

::view-transition-old(h1),
::view-transition-new(h1) {
  height: auto;
  right: 0;
  left: auto;
  transform-origin: right center;
}

::view-transition-old(h1) {
  animation: 0.25s linear both shrink-x;
}

::view-transition-new(h1) {
  animation: 0.25s 0.25s linear both grow-x;
}