title: css3 animation on :hover; force entire animation
body: <p>I've created a simple bounce animation which i'm applying to the <code>:hover</code> state of an element:</p>
  
  <pre><code>@keyframes bounce {
      0% {
        top: 0;
        animation-timing-function: ease-out;
      }
      17% {
        top: 15px;
        animation-timing-function: ease-in;
      }
      34% {
        top: 0;
        animation-timing-function: ease-out;
      }
      51% {
        top: 8px;
        animation-timing-function: ease-in;
      }
      68% {
        top: 0px;
        animation-timing-function: ease-out;
      }
      85% {
        top: 3px;
        animation-timing-function: ease-in;
      }
      100% {
        top: 0;
      }
  }
  
  .box:hover { 
      animation: bounce 1s;
  }
  </code></pre>
  
  <p>The animation works fine, with the exception that when you remove your cursor from the element it abruptly stops.  Is there anyway to force it to continue the set number of iterations even if the mouse has exited?  Basically what I'm looking for here is an animation triggered by the <code>:hover</code> state.  I'm <strong>not</strong> looking for a <strong>javascript</strong> solution.  I haven't seen anyway to do this in the spec, but maybe there's an obvious solution I've missed here?</p>
  
  <p>Here's a fiddle to play with: <a href="http://jsfiddle.net/dwick/vFtfF/">http://jsfiddle.net/dwick/vFtfF/</a></p>