swap animation of two array elements - animation

Question

I'm trying to demonstrate sorting algorithm, on HTML page, when every element of the array display by INPUT tag.
I would like to show swap of two element, by animation like the following one.
I got some problems:
After swap, the left element jump left instead of remain it new place.
How can I start the animation through JavaScript, ans stop it from running by itself?
Not always these two elements next to each other. Sometimes, between them, there are other elements that should not be swap. If these two elements are far from each other, the radius will be very large, so it is best that animation would be an ellipse rather than a circle. Each element has its own id (arr[0], arr[1], ... ,arr[n]), So that it possible to get the location of the two elements that needs swaping. How to take consider their position within the animation?
For example, if need to swap i and j, their locations are:
value1 = document.getElementById("arr[" + i.toString() + "]");
value1.style.top
value1.style.left
value2 = document.getElementById("arr[" + j.toString() + "]");
value2.style.top
value2.style.left
#keyframes drawArc1 {
0% {transform: rotate(0deg);}
// 100% {transform: rotate(180deg);}
100% {transform: rotate(-180deg);}
}
#keyframes drawArc2 {
0% {transform: rotate(0deg);}
// 100% {transform: rotate(-180deg);}
100% {transform: rotate(180deg);}
}
#keyframes drawArc3 {
0% {transform: rotate(180deg);}
100% {transform: rotate(0deg);}
}
#keyframes drawArc4 {
0% {transform: rotate(-180deg);}
100% {transform: rotate(0deg);}
}
.wrapper1 {
width: 100px;
animation: drawArc1 3s;
position: relative;
left: 50px;
}
.inner1 {
display: inline-block;
animation: drawArc2 3s;
}
.wrapper2 {
width: 100px;
animation: drawArc3 3s;
position: relative;
right: 50px;
}
.inner2 {
display: inline-block;
animation: drawArc4 3s;
}
<br>
<br>
<br>
<div>
<div class="wrapper1" style="display:inline-block">
<div class="inner1"><input value = "123" style="width: 25px;"></div>
</div>
<div class="wrapper2" style="display:inline-block">
<div class="inner2"><input value = "456" style="width: 25px;"></div>
</div>
</div>