document.startViewTransition(() => {
  // manipulate the dom / change route...
})

body {
  view-transition-name: content;
}
.train-one {}
.train-two {
  view-transition-name: train2;
  transform: scaleX(1);
}

::view-transition-group(train2) {
  animation-duration: 4s;
}

body {
  view-transition-name: content;
}
.train-one {}
.train-two {
  view-transition-name: train2;
  transform: translateX(100px)
             scaleX(2);
}
::view-transition-group(train2) {
  animation-duration: 4s;
}

::view-transition
├─ ::view-transition-group(content)
│ └─ ::view-transition-image-pair(content)
│     ├─ ::view-transition-old(content)
│     └─ ::view-transition-new(content)
└─ ::view-transition-group(train2)
  └─ ::view-transition-image-pair(train2)
      ├─ ::view-transition-old(train2)
      └─ ::view-transition-new(train2)

@keyframes -ua-view-transition-fade-in {
  from {
    opacity: 0;
  }
}

html::view-transition-new(*) {
  position: absolute;
  inset-block-start: 0;
  inline-size: 100%;
  block-size: auto;

  animation-name: -ua-view-transition-fade-in;
  animation-duration: inherit;
  animation-fill-mode: inherit;
}