I dunno, I prefer to call it too practical. Lets just do terrestrial programming.

Something like this?

  @keyframes ball{
    0%{  left:50px; top:100px;width:0px;  height:0px  }
    10%{ left:50px; top:90px; width:20px; height:20px }
    20%{ left:50px; top:90px; width:20px; height:20px }
    30%{ left:300px;top:50px; width:100px;height:100px}
    50%{ left:300px;top:50px; width:100px;height:100px}
    60%{ left:200px;top:50px; width:100px;height:100px}
    90%{ left:250px;top:100px;width:0px;  height:0px  }
    100%{left:50px; top:100px;width:0px;  height:0px  }
  }

https://jsfiddle.net/gaby_de_wilde/eoj875qr/