Ahtun_lv

На самом деле не совсем понятно, когда запускается анимация? Если после нажатия на кнопку или после события сhange, тогда можно сделать например так:

.is-active {
     animation-name: shake;
     animation-direction: alternate;
     animation-duration: 1s;
     animation-iteration-count: 4;
}

@keyframes shake {
     from {
          transform: translateX(0px);
     }
     to {
          transform: translateX(150px);
     }
}

const button = document.querySelector(".button");

button.classList.add("is-active");

button.addEventListener("animationend", (event) => {
     event.stopPropagation();
     button.classList.remove("is-active");
}, { once: true });

То есть добавить активный класс кнопке, а после окончания анимации удалить добавленный класс.

Или кнопка "убегает" от курсора в каком-то определенном направлении?