roup(hidden) { animation-duration: 300s; }
html::view-transition-image-pair(hidden) { animation: unset; opacity: 0; }

html::view-transition-old(*), html::view-transition-new(*) {
  object-fit: none;
}

html::view-transition-old(target) { animation: unset; opacity: 1; }
html::view-transition-new(target) { animation: unset; opacity: 0; }

</style>

<div class="target">
  <div class="top">This text is at the top of the box</div>
  <div class="middle">This text is in the middle of the box</div>
  <div id="scro