Snap SVG repeat on hover slows on repeated hovers
<p>Have a simple snap.svg rotate-on-hover animation.  Cog rotates on hover-in and stops on hover-out.</p>

<p>Works fine on the first hover in/out but on repeated hovers the animation slows (by half?) each time.  Have no idea why that would happen.</p>

<p>This is what i currently have:</p>

<pre><code>&lt;script&gt; 
var cogs = Snap("#cogs");
var cog1 = cogs.select(".cog1");

cogs.hover(function cogs(){
cog1.stop().animate({ 'transform' : 'r-180,110,110' }, 5000, 
function(){ 
  cog1.attr({ transform: 'rotate(0 110 110)'});
})
cogs();
}, function() {
  cog1.stop(); 
});
&lt;/script&gt;
</code></pre>

<p><a href="https://jsfiddle.net/hpz19wrc/" rel="nofollow">https://jsfiddle.net/hpz19wrc/</a></p>