title: How to reverse an animation on mouse out after hover
body: <p>So, it is possible to have reverse animation on mouse out such as:</p>
  
  <pre><code>.class{
     transform: rotate(0deg);
  
  }
  .class:hover{
     transform: rotate(360deg);
  }
  </code></pre>
  
  <p>but, when using @keyframes animation, I couldn't get it to work, e.g:</p>
  
  <pre><code>.class{
     animation-name: out;
     animation-duration:2s;
  
  }
  .class:hover{
     animation-name: in;
     animation-duration:5s;
     animation-iteration-count:infinite;
  
  }
  @keyframe in{
      to {transform: rotate(360deg);}
  }
  
  @keyframe out{
      to {transform: rotate(0deg);}
  }
  </code></pre>
  
  <p>What is the optimal solution, knowing that I'd need iterations and animation itself?</p>
  
  <p><a href="http://jsfiddle.net/khalednabil/eWzBm/" rel="noreferrer">http://jsfiddle.net/khalednabil/eWzBm/</a></p>