<div class="box one"><i></i></div>
+
<div class="box two"><i></i></div>
=
<div class="box one two"><i></i></div>

<div class="debug"></div>

<button> Toggle the animation </button>

@property --d1 {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
@property --d2 {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

.box {
  display:inline-block;
  vertical-align: middle;
  width:150px;
  height:200px;
  margin:20px 10px;
  position:relative;
  border:1px solid;
  background:
    linear-gradient(blue 0 0) center/100% 1px no-repeat,
    linear-gradient(blue 0 0) center/1px 100% no-repeat;
}

.box i{
  content:"";
  position:absolute;
  z-index:9;
  width:20px;
  height:20px;
  border-radius:50%;
  background:radial-gradient(at 30% 30%,#0000,#000a) red;
  left:0;
  top:calc((50 + var(--d1) + var(--d2))*1%);
  transition:
    --d1 1s ease-in,
    --d2 1s ease-out,
    left 1s linear;
  transform:translate(-50%,-50%);
}
.start i {
  left:100%;
}
.start .one i {
  --d1:30;
}
.start .two i {
  --d2:-20;
}

body {
  font-size:50px;
  font-weight:bold;
}
/**/
d {position:fixed;height:4px;width:4px;background:#222;border-radius:50%}
button {border:none;border-radius:10px;padding:10px 20px;cursor:pointer;position:fixed;bottom:20px;right:20px;font-family:sans-serif;font-size:30px;background:#c82629;color:#fff;}

let elem = document.querySelectorAll('i');
let start;

function debug(timestamp) {
  if (start === undefined)
    start = timestamp;
  const elapsed = timestamp - start;
  for(var i=0;i<3;i++) {
    let rect = elem[i].getBoundingClientRect();
    document.querySelector('.debug').insertAdjacentHTML("afterBegin",'<d style="top:'+(rect.y + rect.height/2)+'px;left:'+(rect.x + rect.width/2)+'px;"></d>')
 }
  if (elapsed < 1000) { 
    window.requestAnimationFrame(debug);
  }
}

document.querySelector("button").addEventListener("click",function() {
  document.body.classList.toggle("start");
  document.querySelector('.debug').innerHTML="&nbsp;";
  start=undefined;
  window.requestAnimationFrame(debug);
})