<svg width="500" height="350">
  <circle id="circle" r="30" cx="50" cy="50" fill="orange" />
  <rect id="rect" width="50" height="50" x="25" y="200" fill="green" />
  
  <animate
    xlink:href="#circle"
    attributeName="cx"
    from="50"
    to="450"
    dur="2s"
    begin="0s"
    repeatCount="2"
    repeatDur="6s"
    fill="freeze"
    id="circle-anim"
  />
  
  <animate
    xlink:href="#rect"
    attributeName="x"
    from="50"
    to="450"
    dur="2s"
    begin="click"
    repeatCount="indefinite"
    repeatDur="7s"
    fill="freeze"
    id="circle-anim"
  />
</svg>

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