 background-color: coral;
}

/* Overlay the page with purple to ensure screenshots taken are of the view
 * transition. */
:root {
  view-transition-name: none;
}
::view-transition {
  background-color: rebeccapurple;
}

/* This step function keeps the old snapshots in their initial state for half
 * the duration, then the new snapshots in their final state for the last half
 * of the duration. */
html::view-transition-group(*),
html::view-transition-new(*),
html::view-transition-old(*) {
  animation-timing