javascript - 网络动画 api，在链结束时重置第一个动画

Question

我第一次尝试使用网络动画 API，并尝试将一些值链接在一起。对于这个简单的动画，我有点困惑，它会沿 X 轴平移 200px，然后在第一个动画完成后沿 Y 轴向下平移 200px。

但是，在动画结束时，它会重置初始动画的 X 值。我尝试过使用'both' | 'forwards'填充模式属性，以及在第二个转换声明中将 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>