title: CSS animation on hover stay at last keyframe when using transform: rotate
body: <p>I am trying to get this animation to stay in its last keyframe on hover but it keeps reverting back to the beginning. I don't mind if I hover off it reverts but not during the hover. I looked through a lot of stack questions and everyone said to uses the animation-fill-mode: forwards, but that doesn't seem to work.</p>
  
  <p>Here is my code and a link to a <a href="http://jsfiddle.net/nd44uqpp/" rel="nofollow">jsfiddle</a></p>
  
  <pre><code>.circle:hover .spin {
    -webkit-animation-name: drop;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-delay: 0;
    -webkit-animation-fill-mode: forwards;
  }
  @-webkit-keyframes drop {
    100% {
      -webkit-transform: rotate(90deg);
    }
  }
  </code></pre>