<style>
div {
    position: relative;
    height: 100px;
    width: 100px;
    background: blue;
}
</style>

Player modified then pause()/play() on and off the compositor. The two boxes should have identical motions.
<br>

<div id="target1"></div>
<div id="target2"></div>

<script>
var player1 = target1.animate([
    {left: '0px'},
    {left: '800px'},
], {
    duration: 1000,
    direction: 'alternate',
    iterations: Infinity,
});

var player2 = target2.animate([
    {transform: 'translate(0px)'},
    {transform: 'translate(800px)'},
], {
    duration: 1000,
    direction: 'alternate',
    iterations: Infinity,
});

setInterval(function() {
  player1.currentTime = 0;
  player1.pause();
  player1.play();
  player2.currentTime = 0;
  player2.pause();
  player2.play();
}, 500);
</script>