Animation commitStyles does not actually set styles

I’m trying to call commitStyles() after an animation is complete so that the styles are retained at the end (by adding to the inline styles) in a way that is performant. However, nothing seems to happen from calling commitStyles, the element just returns to its initial styles after the animation.

document.querySelector("button").addEventListener("click", function(evt) {
  var a = document.getElementById("target").animate([{
    transform: 'translateX(400px)'
  }], 1000);
  a.finished.then(() => a.commitStyles());
});

<div id="target">I can move</div>
<button>Move it</button>