title: Continuous CSS rotation animation on hover, animated back to 0deg on hover out
body: <p>I have an element that spins when you hover over it indefinitely. When you hover out, the animation stops. Simple:</p>
  
  <pre><code>@-webkit-keyframes rotate {
      from {
          -webkit-transform: rotate(0deg);
      }
      to { 
          -webkit-transform: rotate(360deg);
      }
  }
  
  .elem:hover {
      -webkit-animation-name: rotate; 
      -webkit-animation-duration: 1.5s; 
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
  }
  </code></pre>
  
  <p>When you hover out, though, the animation abruptly ceases, reverting to 0 degrees. I'd like to animate back to that position, but I'm having some trouble working out the syntax.</p>
  
  <p>Any input would be awesome!</p>