title: How can I reverse keyframe on hover off?
body: <p>I'm working on a card flip animation using keyframes. Aside from the fact I need the origin of the animation to be in the middle, the card flips fine on hover. However, I need to "unflip" on hover off. Right now it's just resetting and not animating.</p>
  
  <pre><code>.oisqa-widget .flip-container:hover .flipper {
        -webkit-transform-origin: 50% 50%;
        -moz-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
        -o-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-animation: flipcard 1s 0s 1 normal forwards;
        -moz-animation: flipcard 1s 0s 1 normal forwards;
        animation: flipcard 1s 0s 1 normal forwards; }
  </code></pre>
  
  <p>I've created a <a href="http://jsfiddle.net/8e7qLLxw/" rel="nofollow">jsfiddle</a> to show what's happening</p>