<i></i>

<button> Run the animation </button>
i{
  position:fixed;
  width:50px;
  height:50px;
  border-radius:50%;
  background:radial-gradient(at 30% 30%,#0000,#000a) red;
  left:10px;
  top:200px;
}
i.start {
  animation:
    x 2s linear infinite alternate,
    y 2s infinite cubic-bezier(0.5,700,0.5,-700) alternate;
}

@keyframes x {
   to {
     left:300px;
   }
}
@keyframes y {
   to {
     top:199.5px;
   }
}


/**/
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.querySelector('i');
let start;

function debug(timestamp) {
  if (start === undefined)
    start = timestamp;
  const elapsed = timestamp - start;
  let rect = elem.getBoundingClientRect();
  document.body.insertAdjacentHTML("beforeBegin",'<d style="top:'+(rect.y + rect.height/2)+'px;left:'+(rect.x + rect.width/2)+'px;"></d>')

  if (elapsed < 4000) { 
    window.requestAnimationFrame(debug);
  }
}
document.querySelector("button").addEventListener("click",function() {
  elem.classList.add("start");
  window.requestAnimationFrame(debug);
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.