<div class="ball"></div>
<svg width="500" height="350">
  <circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />
  
  <animate 
           xlink:href="#orange-circle"
           attributeName="cy"
           from="50"
           to="250" 
           dur="3s"
           begin="click"
           calcMode="spline"
           values="50; 250; 120; 250; 170; 250; 210; 250"
           keyTimes="0; 0.15; 0.3; 0.45; 0.6; 0.75; 0.9; 1"
           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>
<p>Click on the circle to start the animation.</p>

svg {
  border: 3px solid #eee;
  display: block;
  margin: 1em auto;
}
p {
  color: #aaa;
  text-align: center;
  margin: 2em 0;
}