javascript - Web アニメーション API、チェーンの最後で最初のアニメーションをリセット

Question

初めて Web アニメーション API を試して、いくつかの値を連鎖させようとしています。最初のアニメーションが完了すると、X 軸に沿って 200 ピクセル、次に Y 軸に沿って 200 ピクセル下に移動するこの単純なアニメーションに関して、私は少し混乱しています。

ただし、アニメーションの最後に、最初のアニメーションの X 値がリセットされます。'both' | 'forwards'2 番目の変換宣言で translateX を 0/200 に設定するだけでなく、塗りつぶしモード プロパティをいじってみました。ここで非常に単純なものが欠けているように感じます。

const box = document.getElementById('box');
const animateRight = box.animate(
    [{ transform: 'translateX(0)' }, { transform: 'translateX(200px)' }],
    {
        fill: 'forwards',
        easing: 'ease-in-out',
        duration: 2000,
    }
);
animateRight.finished.then(() => {
    box.animate([{ transform: 'translateY(0)' }, { transform: 'translateY(100px)' }], {
        composite: 'add',
        fill: 'both',
        duration: 1500,
    });
});

#box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
 }

<div id="box"></div>