title: CSS3/Jquery auto rotate animation
body: <p>here is JS fiddle link:
  <a href="http://jsfiddle.net/asif097/Vq8bp/" rel="nofollow">http://jsfiddle.net/asif097/Vq8bp/</a></p>
  
  <p>and CSS:</p>
  
  <pre><code>.hanging-div {
      transition:all 1s;
      -moz-transition:all 1s;
      -webkit-transition:all 1s;
      -o-transition:all 1s;
      transform-origin:0% 0%;
      -moz-transform-origin:0% 0%;
      -webkit-transform-origin:0% 0%;
      -ms-transform-origin:0% 0%;
      -o-transform-origin:0% 0%;
  }
  
  .hanging-div:hover {
      transform:rotate(30deg);
      -ms-transform:rotate(30deg);
      -moz-transform:rotate(30deg);
      -webkit-transform:rotate(30deg);
      -o-transform:rotate(30deg);
  }
  </code></pre>
  
  <p>The div animates while hover and hover out. I want it to keep it animated continuously (a little bit similar to pendulum). How can I achieve that?</p>
  
  <p><strong>N.B.</strong> Is there a way to achieve the same animation with jquery?</p>