Как заставить переводы дополнять друг друга ⇐ CSS

[Anonymous]

Я создаю визуализатор алгоритма сортировки, который меняет местами элементы div, используя трансляцию внутри анимации ключевых кадров. Однако если анимация дважды воздействует на один и тот же элемент, ее позиция сбрасывается в начало, и анимация искажается. Как я могу сделать так, чтобы его положение сохранялось и новая анимация начинала скользить с того места, где остановилась предыдущая анимация?
const elements = [];
function runSort(){
for(var i = 1; i 0; i--){
for(var j = 0; j < i; j++){
if(parseInt(elements[j].innerHTML) > parseInt(elements[j+1].innerHTML)){
elements[j].style.animationName = "slideRight";
elements[j+1].style.animationName = "slideLeft";
await sleep("1000"); //let animation finish running

temp = elements[j];
elements[j] = elements[j+1];
elements[j+1] = temp
}
}
}
elements.forEach((element) => console.log(element.innerHTML)); //prints sorted array
}

//to let animation finish running
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}

Вот мой HTML:

1
12
4
3
19



Подробнее здесь: https://stackoverflow.com/questions/785 ... each-other