PropFLIP：@property 4つと transition でレイアウト変化を FLIP アニメーションする

/* 4つの型付きプロパティ。スケールは子の補正に使うので inherits: true */
@property --tx { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --ty { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --sx { syntax: "<number>"; inherits: true;  initial-value: 1; }
@property --sy { syntax: "<number>"; inherits: true;  initial-value: 1; }

.flip {
  --r: 16px; /* 角丸 */
  --p: 16px; /* padding */
  padding: var(--p);
  transform:
    translate(calc(var(--tx) * 1px), calc(var(--ty) * 1px))
    scale(var(--sx), var(--sy));
  transform-origin: top left; /* getBoundingClientRect() の基準に合わせる */

  transition: --tx, --ty, --sx, --sy;
  transition-duration: .6s, 1s, .4s, .4s;           /* プロパティごとに変えられる */
  transition-timing-function: ease-out, cubic-bezier(.3, 1.5, .5, 1), ease, ease;

  /* 角丸がスケールで楕円にならないよう割り戻す */
  border-radius: calc(var(--r) / var(--sx)) / calc(var(--r) / var(--sy));
}

/* 直下の子だけ逆スケールで文字の伸びを打ち消す（孫はそのまま付いてくる） */
.flip > * {
  transform-origin: top left;
  transform:
    translate(calc(var(--p) / var(--sx) - var(--p)),
              calc(var(--p) / var(--sy) - var(--p)))
    scale(calc(1 / var(--sx)), calc(1 / var(--sy)));
}

function animateLayout(el, updateDOM) {
  const first = el.getBoundingClientRect();   // F: 変化前を測る
  el.style.transition = 'none';               // いったん transition を止める
  updateDOM();                                // DOM を変える
  const last = el.getBoundingClientRect();    // L: 変化後を測る

  // I: 差分（位置は引き算、大きさは割り算）を入れて見た目を元の位置に戻す
  el.style.setProperty('--tx', first.left - last.left);
  el.style.setProperty('--ty', first.top - last.top);
  el.style.setProperty('--sx', first.width / last.width);
  el.style.setProperty('--sy', first.height / last.height);

  el.offsetHeight;                            // スタイルを確定させる（これがないと動かない）
  el.style.transition = '';                   // P: transition を戻して 0/1 へ
  el.style.setProperty('--tx', 0);
  el.style.setProperty('--ty', 0);
  el.style.setProperty('--sx', 1);
  el.style.setProperty('--sy', 1);
}

button.onclick = () =>
  animateLayout(box, () => stage.toggleAttribute('data-last'));