CSS3-移动SVG圈

Question

I have a SVG Circle that I'd like to have the ability to move around using CSS3 animations. Essentially at the moment the circle is moved off to the right, and would like to animate move it to the left. How would I go about it? Thanks.

<svg version="1.1" id="ls_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
   x="0px" y="0px" viewBox="82 165.3 449.1 461.3" xml:space="preserve">
<circle id="leftCircle" class="circles" cx="86.3" cy="396.3" r="4.3"/>
</svg>

EDIT: Forgot examples. The javascript moves the SVG item successfully, but is instant instead of animating.

#leftCircle {
  -webkit-transition: width 5s ease-in-out;
  -moz-transition: width 5s ease-in-out;
  -o-transition: width 5s ease-in-out;
  -ms-transition: width 5s ease-in-out;
  transition: width 5s ease-in-out;
}

JS:

$('#leftCircle').attr('cx', '400')

Answer 1

You can do it combining animate() and step:

 $('#leftCircle').animate( {'cx': '400'}, {step:function(v1){$(this).attr("cx",v1)}} ) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <svg version="1.1" id="ls_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="82 165.3 449.1 461.3" xml:space="preserve"> <circle id="leftCircle" class="circles" cx="86.3" cy="196.3" r="4.3"/> </svg>