title: CSS3 Animation + @keyframe run till the end
body: <p>I can't find the way to play an animation till the end when an element is :hover.</p>
  
  <ul>
  <li>When i :hover out, the animation reset - but i want it to continue till the end.</li>
  <li><a href="http://jsfiddle.net/5SueS/" rel="nofollow">JsFiddle</a></li>
  </ul>
  
  
  
  <pre><code>&lt;div class="picture"&gt;&lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>    .picture:hover {
         -webkit-animation:swing 1s ease-in-out;
      }
  
  
      @-webkit-keyframes swing {
        [...] 
      }
  </code></pre>