Javascript web动画api，重置链末端的第一个动画

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

但是，在动画结束时，它会重置初始动画的X值。我尝试过在fill mode属性中使用

'both'|'forwards'

，并在第二次转换声明中将translateX设置为0/200。感觉我错过了一些很简单的东西

const-box=document.getElementById（'box'）；
常量animateRight=box.animate(
[{transform:'translateX（0）}，{transform:'translateX（200px）}]，
{
填写：'向前'，
放松：“放松进入”，
期限：2000年，
}
);
动画右。完成。然后（（）=>{
动画（[{transform:'translateY（0）}，{transform:'translateY（100px）}）{
复合：“添加”，
填写：'两者'，
持续时间：1500，
});
});
#框{
宽度：100px；
高度：100px；
边框：1px纯黑；
}