title: How can I have an animation follow my cursor
body: <p>So currently, if you hover over the compass the needle spins around, however, when you take your mouse off it just resets.</p>
  
  <p>Is there a way that I can either:</p>
  
  <ul>
  <li>Make the needle follow wherever my mouse is when it is hovered over and if i took my mouse off at say the south position, the needle stay there</li>
  </ul>
  
  <p>or</p>
  
  <ul>
  <li>spin round on hover like now but pause when i take my mouse off it and resume when i re-hover</li>
  </ul>
  
  <p>the website can be found at</p>
  
  <p><a href="http://newsunken.tumblr.com" rel="nofollow">newsunken.tumblr.com</a></p>
  
  <p>and my current code is...</p>
  
  
  
  <pre class="lang-css prettyprint-override"><code>.arrow {
      background-image: url(compass.png);
  }
  
  .arrowhover {
      position: absolute;
      margin-top: -72px;
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -webkit-transition: all 0s ease-in-out;
      -moz-transition: all 0s ease-in-out;
      -ms-transition: all 0s ease-in-out;
      -o-transition: all 0s ease-in-out;
      transition: all 0s ease-in-out;
  }
  </code></pre>
  
  <p>(that is to stop the arrow from rotating when i take my mouse off)</p>
  
  <p>and the spin code is</p>
  
  <pre class="lang-css prettyprint-override"><code>.arrowhover:hover {
      -webkit-transform: rotate(1440deg);
      -moz-transform: rotate(1440deg);
      -webkit-transition: all 1.7s ease-out;
      -moz-transition: all 1.7s ease-in-out;
      -ms-transition: all 1.7s ease-in-out;
      -o-transition: all 1.7s ease-in-out;
      transition: all 1.7s ease-in-out;
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  }
  </code></pre>