javascriptのアニメーションで.reverse()が次回以降も効いてしまう

前提・実現したいこと

ボタンをマウスホバーすると左から右へアニメーションし、マウスアウトで左へ逆再生で戻るようにしたい。

javascriptのアニメーションで.reverse()が効き続けてしまう。

該当のソースコード

【html】
<body>
    <div id="red-ball"></div>
    <div class="buttons">
        <button id="play">PLAY</button>
    </div>
</body>
【css】
* {
    margin: 0;
    padding: 0;
}
body {
    margin: 0;
    overflow: hidden;
    min-height: 100vh;
}
#red-ball {
    background: red;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 50px 0;
}
button {
    padding: 10px;
    margin-top: 10px;
}
【js】
const play = document.getElementById('play');
const moveXBall = document.getElementById('red-ball').animate([
    { 'transform': 'translate(0vw)', 'offset': 0, easing: 'ease-in-out' },
    { 'transform': 'translate(20vw)', 'offset': 0.2, easing: 'ease-out' },
    { 'transform': 'translate(17vw)', 'offset': 0.6, easing: 'ease-in' },
    { 'transform': 'translate(30vw)', 'offset': 1, easing: 'ease-in-out' }
], {
    duration: 3000,
    easing: 'ease',
    fill: 'forwards',
}
);
moveXBall.pause();

play.addEventListener('mouseenter', () => {
    moveXBall.play();
});
play.addEventListener('mouseleave', () => {
    moveXBall.reverse();
});

試したこと

moveXBall.onfinish = () => {
moveXBall.reverse();
moveXBall.pause();
};
こちらを追加すればアニメーション途中での逆再生は上手くいったのですが、今度は逆に完了後の逆再生で戻らなくなってしまいました。
初歩的なことかもしれませんが、お詳しい方がおりましたらどうぞよろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

試してみましたが、reverse()の挙動がちょっとおかしいかもしれませんね。

js
1play.addEventListener('mouseenter', () => {
2    moveXBall.playbackRate = 1;
3    moveXBall.play();
4});
5play.addEventListener('mouseleave', () => {
6    moveXBall.playbackRate = -1;
7    moveXBall.play();
8});