title: CSS animation: pausing
body: <p>I have a simple CSS3 animation which I would like to pause on hover.    </p>
  
  <p>Here is a simplified version:</p>
  
  <pre><code>h1 {
      animation-name: test 3000ms infinite alternate;
  }
  @keyframes test {
      from {
          transform: translate(0,0);
      }
      to {
          transform: translate(100px,0);
      }
  }
  h1:hover {
      animation: paused;
  }
  </code></pre>
  
  <p>It works, but pausing means jumping back to the <code>0%</code> state. Is there a way to either (a) pause in the current state of (b) resetting more gracefully, such as running through one final loop?</p>
  
  <p>Thanks</p>