<div class="box parabolic1"><i></i></div>
<div class="box parabolic2"><i></i></div>
<div class="box parabolic3"><i></i></div>
<div class="box sinusoidal1"><i></i></div>
<div class="box sinusoidal2"><i></i></div>
<div class="box sinusoidal3"><i></i></div>


<button> Run the animations </button>

.box {
  display:inline-block;
  width:150px;
  height:200px;
  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:30px;
  height:30px;
  border-radius:50%;
  background:radial-gradient(at 30% 30%,#0000,#000a) red;
  left:0;
  top:50%;
  transform:translateY(-50%);
}
.start .parabolic1 i {
  animation:
    x 1s linear infinite alternate,
    y1 1s infinite cubic-bezier(0,667,1,667) alternate;
}
.start .parabolic2 i {
  animation:
    x 1s linear infinite alternate,
    y1 1s infinite cubic-bezier(0.5,667,1,667) alternate;
}
.start .parabolic3 i {
  animation:
    x 1s linear infinite alternate,
    y1 1s infinite cubic-bezier(0,667,0.5,667) alternate;
}
.start .sinusoidal1 i {
  animation:
    x 1s linear infinite alternate,
    y1 1s infinite cubic-bezier(0.5,1725,0.5,-1725) alternate;
}
.start .sinusoidal2 i {
  animation:
    x 1s linear infinite alternate,
    y1 1s infinite cubic-bezier(0.8,1725,0.2,-1725) alternate;
}
.start .sinusoidal3 i {
  animation:
    x 1s linear infinite alternate,
    y1 1s infinite cubic-bezier(0.2,1725,0.7,-1725) alternate;
}

@keyframes x { to {left:calc(100% - 30px)}}
@keyframes y1 {to {top:49.9%}}


/**/
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<6;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 < 2000) { 
    window.requestAnimationFrame(debug);
  }
}

document.querySelector("button").addEventListener("click",function() {
  document.body.classList.add("start");
  window.requestAnimationFrame(debug);
})