Почему анимации CSS резко останавливаются? ⇐ Html

[Anonymous]

Я наткнулся на новую тему CSS -анимации. И я попытался внедрить несколько примеров. В коде ниже. Есть 2 обработчика событий, связанных с элементами. Они оба меняют свойство анимации одного и того же элемента. При стрельбе любого события в первый раз анимация гладкая. Но после этого оба события резко останавливаются. Как я могу сделать это плавным?

Код: Выделить всё

document.querySelector('#button1').onclick = ({ currentTarget }) => {
currentTarget.style.animation = 'mymove 2s linear forwards';
}

document.querySelector('#button2').onclick = ({ currentTarget }) => {
currentTarget.style.animation = 'mymove 2s linear reverse backwards';
}< /code>
#button1,
#button2 {
width: 100px;
height: 100px;
background: red;
position: relative;
}

#button2 {
background: aqua;
}

@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}< /code>

Подробнее здесь: https://stackoverflow.com/questions/644 ... d-abruptly