<svg width="500" height="100">
  <circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />
  
  <animate 
           xlink:href="#orange-circle"
           attributeName="cx"
           from="0"
           to="100" 
           additive="sum"
           accumulate="sum"
           repeatCount="3"
           calcMode="spline"
           keyTimes="0;1"
           keySplines=".42 0 1 1"
           dur="1s"
           begin="click"
           fill="freeze" />
</svg>
<p>Click on the circle to animate it.</p>

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