title: SVG rotate path
body: <p>I'm starting to use SVG and so far it's all okay, but when I try to do some animation with CSS the result isn't what I expect it to be.</p>
  
  <p>I want to rotate a gear like in <a href="http://jsfiddle.net/nJku3/1/" rel="noreferrer">this Fiddle</a>.</p>
  
  <p>Below is the CSS I used to rotate the elements:</p>
  
  <pre><code>.gear {
      -webkit-animation: rotation 2s infinite linear;
      -moz-animation: rotation 2s infinite linear;
      -o-animation: rotation 2s infinite linear;
      animation: rotation 2s infinite linear;
  }
  
  @-webkit-keyframes rotation {
      from {-webkit-transform: rotate(0deg);}
      to   {-webkit-transform: rotate(359deg);}
  }
  @-moz-keyframes rotation {
      from {-moz-transform: rotate(0deg);}
      to   {-moz-transform: rotate(359deg);}
  }
  @-o-keyframes rotation {
      from {-o-transform: rotate(0deg);}
      to   {-o-transform: rotate(359deg);}
  }
  @keyframes rotation {
      from {transform: rotate(0deg);}
      to   {transform: rotate(359deg);}
  }
  </code></pre>