<div class="box one"><i></i></div>+<div class="box two"><i></i></div>+<div class="box three"><i></i></div>=<div class="box one two three"><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;
}
@property --d3 {
  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:99;
  width:10px;
  height:10px;
  border-radius:50%;
  background:radial-gradient(at 30% 30%,#0000,#000a) red;
  left:0;
  top:calc((50 + var(--d1) + var(--d2) + var(--d3))*1%);
  transition:
    --d1 1s cubic-bezier(.5,500,1,500),
    --d2 1s cubic-bezier(0.1,600,0.9,-600),
    --d3 1s cubic-bezier(0.7,600,0.3,-600),
    left 1s linear;
  transform:translate(-50%,-50%);
}
.start i {
  left:100%;
}
.start .one i {
  --d1:-0.1;
}
.start .two i {
  --d2:0.2;
}
.start .three i {
  --d3:-0.2;
}

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<4;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);
})