<div class="box"><i></i></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;
  width:200px;
  height:200px;
  margin:30px;
  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;
  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 cubic-bezier(0.7,1200,0.3,-1200),
    --d2 1s cubic-bezier(0.5,1200,0.5,-1200),
    left 1s linear;
  transform:translate(-50%,-50%);
}
.start  i {
  --d1:0.2;
  --d2:-0.2;
  left:100%;
}


/**/
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;top: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<1;i++) {
    let rect = elem[i].getBoundingClientRect();
    document.body.insertAdjacentHTML("beforeBegin",'<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");
  window.requestAnimationFrame(debug);
})