title: jQuery continous back and forth rotation animation
body: <p>I need some help with this.</p>
  
  <p>I made a nice web kit animation for one of the elements on my site. It is supposed to rotate 7 degrees back and forth continuously.
  Unfortunately it works only in Chrome. Here is the code:</p>
  
  <pre><code>#brk {
  background: url("../images/brk.png");
  width: 118px;
  height: 54px;
  display: block;
  position: relative;
  top: 65px;
  left: 93px;
       -webkit-animation: brk-spin 3s infinite linear;
       -moz-animation: brk-spin 3s infinite linear;
       -o-animation: brk-spin 3s infinite linear;
       -ms-animation: brk-spin 3s infinite linear;
  }
  
  
  @-webkit-keyframes brk-spin {
  0% { -webkit-transform: rotate(0deg);}
  25% { -webkit-transform: rotate(-7deg);}
  50% { -webkit-transform: rotate(0deg);}
  75% { -webkit-transform: rotate(7deg);}
  100% { -webkit-transform: rotate(0deg);}
  }
  
  @-moz-keyframes brk-spin {
  0% { -webkit-transform: rotate(0deg);}
  25% { -webkit-transform: rotate(-7deg);}
  50% { -webkit-transform: rotate(0deg);}
  75% { -webkit-transform: rotate(7deg);}
  100% { -webkit-transform: rotate(0deg);}
  }
  
  @-o-keyframes brk-spin {
  0% { -webkit-transform: rotate(0deg);}
  25% { -webkit-transform: rotate(-7deg);}
  50% { -webkit-transform: rotate(0deg);}
  75% { -webkit-transform: rotate(7deg);}
  100% { -webkit-transform: rotate(0deg);}
  }
  
  @-ms-keyframes brk-spin {
  0% { -webkit-transform: rotate(0deg);}
  25% { -webkit-transform: rotate(-7deg);}
  50% { -webkit-transform: rotate(0deg);}
  75% { -webkit-transform: rotate(7deg);}
  100% { -webkit-transform: rotate(0deg);}
  } 
  </code></pre>
  
  <p>So I thought I use some jQuery for the browsers that does not support the webkit animation.
  I tried many variation, but nothing worked.</p>
  
  <p>I downloaded the jQuery rotate plug in ( <a href="https://code.google.com/p/jqueryrotate/" rel="nofollow">https://code.google.com/p/jqueryrotate/</a> )</p>
  
  <p>I tried something like this:</p>
  
  <pre><code>&lt;script&gt;
  if(!Modernizr.cssanimation) { 
      $(function() {
  
      $('#brk').stop().rotate({ angle:0, animateTo: 7, duration:600, callback: 
  
  function() {
          $('#brk').stop().rotate({ animateTo: -7, duration:600});
          }
      });
  
  (function roty() {
       setTimeout(function() { roty() },1200);
               })();
         });
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>But whit this the image (div with background) swings only once back and forth and it stops.</p>
  
  <p>Any idea how to make it loop?</p>
  
  <p>Help would be much appreciated. Thank you!</p>