JS .animate сбрасывает элемент в исходное положение после завершения выполнения

Я вращаю круг до 180 ° после этой анимации, круг возвращается к 0 ° от того места, где он начинался. Я уверен, что это потому, что я вызвал его в функции, которая запускается onclickevent, и состояние кругового объекта (#XOWheel) не сохранено (потому что я не знаю, как это сделать)

function showWhoIs() {
  console.log(main.stats.currentPlayerIdx); // 0 = O | 1 = X
  document.querySelector('#XOWheel').animate([
    { transform: 'rotate(0deg)' },
    { transform: 'rotate(180deg)' }
  ], {
    duration: 1000,
    iterations: 1
  });
}

Есть ли лучший способ сделать то, что я сделал здесь? А что я делаю не так?