<svg width="500" height="350">
  <circle id="circle" r="30" cx="50" cy="50" fill="orange" />
  <animate
  xlink:href="#circle"
  attributeName="cy"
  from="50"
  to="250"
  dur="3s"
  begin="click" 
  keyTimes="0; 0.15; 0.3; 0.45; 0.6; 0.75; 0.9; 1"
  values="50; 250; 120; 250; 170; 250; 210; 250"    
  calcMode="spline"                                 
  keySplines="                                      
    0.42 0 1 1;                                     
    0 0 0.59 1;                                     
    0.42 0 1 1;                                     
    0 0 0.59 1;
    0.42 0 1 1;
    0 0 0.59 1;
    0.42 0 1 1
  "
  fill="freeze"
  id="circ-anim"
/>
</svg>

svg {
  border: 3px solid #eee;
  display: block;
  margin: 1em auto;
}