title: how to revert css3 keyframe animation from current frame on mouse out?
body: <p>I want tot revert back to my first position from the current frame of animation. 
  Here in this code I have written a simple css3 keyframe animation and its working on hover. while mouse is out, I want this element to revert back to its first position with animation. </p>
  
  <pre><code>// html
  ------------------------------------
     &lt;div class="wrapper"&gt;
          &lt;div class="test"&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Css</p>
  
  <pre><code>.wrapper {width: 300px; height: 400px; position: relative;}
  .test {width:40px; height: 40px; background-color: #0c6; border-radius: 40px; position: absolute; top:100px; left: 100px;}
  
  .wrapper:hover .test{
  animation-name:testin ;                        -webkit-animation-name:testin;
  animation-duration: 2s;                    -webkit-animation-duration: 2s;
  animation-timing-function: ease;             -webkit-animation-timing-function:ease;
  animation-iteration-count: infinite;         -webkit-animation-iteration-count: infinite;   
  animation-direction: normal;                 -webkit-animation-direction: normal;
  animation-delay: 0s;                         -webkit-animation-delay:0s;
  animation-play-state: running;               -webkit-animation-play-state: running;
  animation-fill-mode: forwards;               -webkit-animation-fill-mode: forwards;
  
   }
  
  @keyframes testin {
  0%{top:100px; left:100px;}
  20%{top:150px; left:150px;}
  40%{top:200px; left:50px;}
  60%{top:250px; left:150px;}
  80%{top:300px; left:50px;}
  100%{top:350px; left:150px;}
  
  }
  @-webkit-keyframes testin {
  0%{top:100px; left:100px;}
  20%{top:150px; left:150px;}
  40%{top:200px; left:50px;}
  60%{top:250px; left:150px;}
  80%{top:300px; left:50px;}
  100%{top:350px; left:150px;}
  }
  </code></pre>
  
  <p>Please tell me if there is any javascript / jquery help or library for this kind of effects.</p>
  
  <p>Thanks</p>