Web API Animation能否累加动画？Y轴变换丢失问题咨询

我在测试Web API Animation的动画累加功能时遇到了问题。先执行这段代码：

// 瞬间将元素移动到(100,100)位置
el.animate([{transform: 'translate(100px, 100px)'}], {duration: 0, fill: 'forwards'});

// 之后添加一段带时长的移动动画
el.animate([{transform: 'translateX(200px)'}], {duration: 2000, fill: 'forwards', composite: 'accumulate'});

动画初始阶段正常，盒子移动到(100,100)后开始第二段动画，但动画结束时Y轴变换突然丢失，盒子向上移动。我本以为fill: 'forwards'搭配composite: 'accumulate'能保留Y轴的变换效果，但结果不稳定，偶尔才正常。

我的期望效果是：

• 将盒子移动到(100,100)
• 应用相对变换后，最终盒子停在(300,100)

完整代码示例 #

JavaScript代码

const el = document.querySelector('.box');

el.animate([{transform: 'translate(100px, 100px)'}], {duration: 0, fill: 'forwards'});

el.animate([{transform: 'translateX(200px)'}], {duration: 2000, fill: 'forwards', composite: 'accumulate'});

CSS代码

.container{
  display: block;
  height: 100vh;
  overflow: hidden;
}
.box{
  position: absolute;
  width: 300px;
  height: 200px;
  background-color: brown;
 }

HTML代码

<div class="container">
  <div class="box">  
  </div>
</div>

内容的提问来源于stack exchange，提问作者Eric