I am creating a sorting algorithm visualizer that swaps div elements using translate inside keyframe animations. However, if an animation acts on the same element twice, its position resets to the beginning and the animation gets messed up. How can I make it so its position saves and the new animation begins sliding from where the previous animation left off?

const elements = [];
function runSort(){
    for(var i = 1; i <= 5; i++){
        elements.push(document.getElementById(i));
    }
    bubbleSort();
}

async function bubbleSort(){
    for(var i = elements.length -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));
}

Here is my HTML:

    <div id = container>
        <div id = "1" class = element >1</div>
        <div id = "2" class = element >12</div>
        <div id = "3" class = element >4</div>
        <div id = "4" class = element >3</div>
        <div id = "5" class = element >19</div>
    </div>