Part the first

Animate this box from one place to the next with a CSS animation, triggered by clicking the button.

#p1 div.on b {
  animation: toright 250ms linear;
  animation-fill-mode: forwards;
}
@keyframes toright {
  from { transform: none; }
  to { transform: translateX(140px); }
}

do box 1

Part the second

Animate this box from one place to the next with a weird CSS animation with an offset-path, triggered by clicking the button.

#p2 div.on b {
  animation: torightwiggly 250ms linear;
  animation-fill-mode: forwards;
  offset-path: path('M20,20 C50,-50 100,50 140,0');
}
@keyframes torightwiggly {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

do box 2

Part the third

Animate this box from one place to the next with the shared element transitions API, triggered by clicking the button.

#p3 div b, #p3 div i {
  page-transition-tag: p3box;
  contain: paint;
}
.demo b { position: absolute; background: red; left: 20px; }
.demo i { position: absolute; background: blue; right: 20px; }
...
const t = document.createDocumentTransition();
await t.start(async () => {
  q("#p3 div b").remove();
  const i = document.createElement("i");
  q("#p3 div").append(i);
});

do box 3

Part the fourth

Animate this box with the shared element transitions API, but apply the offset path to its movement. I don't know how to do this. This is because when we use the transitions API, I don't create the @keyframes; it does. And if I create my own @keyframes to do the animation, as I did in part 2... what do I put in the translate values? I don't know where to translate the box to; the transitions API works that out for me, which is the point of it.

do box 4