@keyframes slide-left {
      50% {
        transform: translateX(60px);
      }
    }
    ::view-transition-image-pair(l7) {
      animation: slide-left 0.2s 0.6s;
    }
    ::view-transition-image-pair(l6) {
      animation: slide-left 0.3s 0.5s;
    }
    ::view-transition-image-pair(l5) {
      animation: slide-left 0.4s 0.4s;
    }
    ::view-transition-image-pair(l4) {
      animation: slide-left 0.5s 0.3s;
    }
    ::view-transition-image-pair(l3) {
      animation: slide-left 0.6s 0.2s;
    }
    ::view-transition-image-pair(l2) {
      animation: slide-left 0.7s 0.1s;
    }
    ::view-transition-image-pair(l1) {
      animation: slide-left 0.8s 0s;
    }
    ::view-transition-group(*) {
      animation-duration: 0.8s;
    }
    ::view-transition-image-pair(front) {
      transform: scale(1.01);
    }
    ::view-transition-new(*) {
      animation: none;
    }
    ::view-transition-old(*) {
      display: none;
    }
    #front {
      view-transition-name: front;
      pointer-events: none;
      border: 0;
      width: 220px;
      height: 264px;
      background-color: #888;
      background-image: linear-gradient(
          45deg,
          rgba(255, 255, 255, 0.1) 25%,
          transparent 25%,
          transparent 75%,
          rgba(255, 255, 255, 0.1) 75%,
          rgba(255, 255, 255, 0.1)
        ),
        linear-gradient(
          45deg,
          rgba(255, 255, 255, 0.1) 25%,
          transparent 25%,
          transparent 75%,
          rgba(255, 255, 255, 0.1) 75%,
          rgba(255, 255, 255, 0.1)
        );
      background-size: 20px 20px;
      background-position:
        0 0,
        10px 10px;

      mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect width="100%" height="100%" fill="white" /><rect x="1" y="1" width="130" height="200" fill="black" /></svg>');
      mask-mode: luminance;
    }
    li {
      padding: 10px;
      color: black;
      background-color: #dfd;
      margin: 5px;
      border-radius: 5px;
    }
    ul {
      overflow-y: scroll;
      height: 200px;
      list-style: none;
      width: 150px;
      border: 1px solid grey;
    }
    button {
      width: 150px;
      color: black;
      background-color: #aca;
    }
    #front ul {
      pointer-events: none;
    }
    #front > * {
      pointer-events: auto;
    }
    #ul,
    #front {
      position: absolute;
    }
    #stage {
      display: flex;
      width: 150px;
    }
    @media (prefers-reduced-motion: no-preference) {
      @view-transition {
        navigation: auto;
      }
    }
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    @media (prefers-reduced-motion: no-preference) {
      @view-transition {
        navigation: auto;
      }
    }
    #stage {
      display: flex;
      width: 150px;
    }
    #ul,
    #front {
      position: absolute;
    }
    #front > * {
      pointer-events: auto;
    }
    #front ul {
      pointer-events: none;
    }
    button {
      width: 150px;
      color: black;
      background-color: #aca;
    }
    ul {
      overflow-y: scroll;
      height: 200px;
      list-style: none;
      width: 150px;
      border: 1px solid grey;
    }
    li {
      padding: 10px;
      color: black;
      background-color: #dfd;
      margin: 5px;
      border-radius: 5px;
    }

    #front {
      view-transition-name: front;
      pointer-events: none;
      border: 0;
      width: 220px;
      height: 264px;
      background-color: #888;
      background-image: linear-gradient(
          45deg,
          rgba(255, 255, 255, 0.1) 25%,
          transparent 25%,
          transparent 75%,
          rgba(255, 255, 255, 0.1) 75%,
          rgba(255, 255, 255, 0.1)
        ),
        linear-gradient(
          45deg,
          rgba(255, 255, 255, 0.1) 25%,
          transparent 25%,
          transparent 75%,
          rgba(255, 255, 255, 0.1) 75%,
          rgba(255, 255, 255, 0.1)
        );
      background-size: 20px 20px;
      background-position:
        0 0,
        10px 10px;

      mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect width="100%" height="100%" fill="white" /><rect x="1" y="1" width="130" height="200" fill="black" /></svg>');
      mask-mode: luminance;
    }
    ::view-transition-old(*) {
      display: none;
    }
    ::view-transition-new(*) {
      animation: none;
    }
    ::view-transition-image-pair(front) {
      transform: scale(1.01);
    }
    ::view-transition-group(*) {
      animation-duration: 0.8s;
    }
    ::view-transition-image-pair(l1) {
      animation: slide-left 0.8s 0s;
    }
    ::view-transition-image-pair(l2) {
      animation: slide-left 0.7s 0.1s;
    }
    ::view-transition-image-pair(l3) {
      animation: slide-left 0.6s 0.2s;
    }
    ::view-transition-image-pair(l4) {
      animation: slide-left 0.5s 0.3s;
    }
    ::view-transition-image-pair(l5) {
      animation: slide-left 0.4s 0.4s;
    }
    ::view-transition-image-pair(l6) {
      animation: slide-left 0.3s 0.5s;
    }
    ::view-transition-image-pair(l7) {
      animation: slide-left 0.2s 0.6s;
    }
    @keyframes slide-left {
      50% {
        transform: translateX(60px);
      }
    }