JSFiddle - React, Tailwind, and code Playground

by gaby de wilde

HTML

<div></div>

CSS

@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:30px; top:100px;width:0px;  height:0px  }
  }
  div{
  border-radius:330px;
  background:blue;
  position: absolute;
  animation: ball 2s infinite normal; 
  left:50px;top: 100px;width:1px;height:1px; 
  }