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

Player started then cancel()/finish(). Neither of the boxes should move.
<br>

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

<script>
var player1 = target1.animate([
    {transform: 'translate(0px)'},
    {transform: 'translate(800px)'}
], {
    duration: 1000,
    delay: 100
});

var player2 = target2.animate([
    {transform: 'translate(0px)'},
    {transform: 'translate(800px)'}
], {
    duration: 1000,
    delay: 100
});

setTimeout(function() {
    player1.cancel();
    player2.finish();
}, 10);
</script>