API веб-анимации — как воспроизвести задом наперед, а не наоборот?

API веб-анимации имеет метод reverse, который позволяет воспроизводить текущую анимацию в направлении, противоположном ее текущему направлению.

Однако у меня есть сценарий, в котором я просто хотел бы воспроизвести определенную анимацию назад. В настоящее время я выполняю это, проверяя, движется ли анимация сначала вперед или назад, а затем делаю обратное, но это кажется шатким!

Существует ли установленный шаблон для того, чтобы просто попросить определенную анимацию запуститься в обратном направлении (и не обязательно запуститься в обратном направлении от ее текущей точки воспроизведения)?

В приведенном ниже примере кода, если вы находитесь в первом экземпляре (idx === 0), я проверяю, идете ли вы вперед, проверяя, является ли playbackRate 1 первым. Без этого анимация сначала запускалась бы в обратном направлении.

Кажется, должен быть более простой способ запуска анимации в обратном направлении, когда это необходимо, — не так ли?

var box = document.querySelector(".thing");
var btn = document.querySelector("button");
var span = document.querySelector("span");
const move = box.animate(
    [{ transform: "translate(0px, 0px)" }, { transform: "translate(100px, 0px)" }],
    { duration: 500, fill: "both" }
);
move.pause();

let idx = 0;

function choose() {
    if (idx === 0) {
        move.playbackRate === 1 ? move.play() : move.reverse();
    } else {
        move.reverse();
    }
}

btn.addEventListener("click", () => {
    choose();
    idx = idx === 0 ? 1 : 0;
    span.textContent = idx;
});

.thing {
    width:49px;
    height: 49px;
    background-color: red;
}

<div class="thing"></div>
<button type="button">ClickMe</button>
<span>0</span>