Как сделать повтор анимации после перемещения элемента в другую позицию? ⇐ Html

[Гость]

Я пытаюсь создать поле, которое перемещается при каждом щелчке мыши и остается там до тех пор, пока не будет выполнено повторное нажатие. У меня есть анимация, которая заставляет его выглядеть «злой» при наведении на него курсора, и анимация, которая убегает при нажатии.

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

Я новичок в HTML/CSS и JS, поэтому не уверен, что это вообще возможно при таком подходе.

HTML-файл:

НЕ НАЖИМАЙТЕ НА МЕНЯ!

CSS-файл:

тело{ цвет фона: сланцево-серый; дисплей: гибкий; гибкое направление: столбец; } #коробка{ высота: 100 пикселей; ширина: 100 пикселей; цвет фона: красный; граница: сплошная, 3 пикселя, черная; позиция: абсолютная; верх: 50%; осталось: 50%; поле: -50px 0 0 -50px; семейство шрифтов: фантазия; отображение: таблица-ячейка; выравнивание текста: по центру; вертикальное выравнивание: по середине; } .hovering:hover{ начертание шрифта: жирный; анимация: злая; количество итераций анимации: бесконечно; продолжительность анимации: .1 с; } .hovering:активный { коробка-тень: вставка -2px -2px 3px rgba(255, 255, 255, 0,6), вставка 2px 2px 3px rgba(0, 0, 0, 0,6); } .бег{ анимация: бегун; количество итераций анимации: 1; продолжительность анимации: 1 с; режим анимации-заполнения: вперед; } @keyframes злой { 0% {преобразование: RotateZ(-3deg)} 50%{преобразование: RotateZ(3deg)} 100% {transform: RotateZ(-3deg)} } @keyframes бегун { 100% {transform: TranslateX(100%);} } JS-файл:
функция runAway() { let theButton = document.getElementById('box'); theButton.classList.remove("зависание"); theButton.classList.add("работает"); //как повторить? простое добавление и удаление снова не работает }