<svg width="500" height="100">
  <circle id="orange-circle" r="30" cx="50" cy="50" fill="#0099CC" />
  
  <animate 
           xlink:href="#orange-circle"
           attributeName="cx"
           from="50"
           to="450" 
           dur="1s"
           begin="click"
           fill="freeze" 
           id="move"/>
  <animate 
           xlink:href="#orange-circle"
           attributeName="fill"
           from="#0099CC"
           to="deepPink" 
           dur="5s"
           repeatCount="indefinite"
           begin="0s"
           end="move.begin"
           fill="freeze"
           id="changeColor"/>
</svg>

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