I’m trying to understand if it’s possible to accumulate animations with the Web API animation and I can’t seem to figure it out.

//move element very fast to 100,100 with no duration
el.animate([{transform: 'translate(100px, 100px'}], {duration: 0, fill: 'forwards'});

//add another movement after that with duration
el.animate([{transform: 'translateX(300px)'}], {duration: 0, fill: 'forwards', composite: 'accumulate'});

Everything happens properly, the box moves to 100,100 then the animation starts. The problem is, at the end of the animation, the boxes moves up like it has suddenly lost the Y transform. It is possible to keep the Y transform at the end? I thought fill: 'forwards' + composite : 'accumulate' would do that …

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'});

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

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

JsFiddle