title: CSS3 transform: translate on hover, with transition
body: <p>This should be really simple.</p>
  
  <p>I have a bunch of anchors in my HTML, like so:</p>
  
  <pre><code>&lt;a href="#"&gt;Link 1&lt;/a&gt;
  &lt;a href="#"&gt;Link 2&lt;/a&gt;
  &lt;a href="#"&gt;Link 3&lt;/a&gt;
  &lt;a href="#"&gt;Link 4&lt;/a&gt;
  &lt;a href="#"&gt;Link 5&lt;/a&gt;
  </code></pre>
  
  <p>And in CSS I placed a hover effect to do a <code>translate: transform();</code></p>
  
  <pre><code>a {
    font-size: 2em;
    transition: all .3s ease-out;
  }
  
  a:hover {
    transform: translate(0, -5px);
  }
  </code></pre>
  
  <p>Now, this should make the anchors move up 5 pixels when you hover them. And they do, but they snap down immediately, even though the mouse still hovers. Anyone else encountered this behavior and found a solution? I'd like the effect to stay active <strong>while</strong> mouse hovers.
  Codepen link: <a href="http://codepen.io/BrianEmilius/pen/NqoLQo" rel="noreferrer">http://codepen.io/BrianEmilius/pen/NqoLQo</a></p>