title: How to continue CSS animation on :hover after mouse leave the element?
body: <p>There is example of animation:</p>
  
  <pre><code>.b-ball_bounce {transform-origin: top;}
  @-webkit-keyframes ball_animation {
      20%   {transform: rotate(-9deg);}
      40%  {transform: rotate(6deg);}
      60%  {transform: rotate(-3deg);}
      80% {transform: rotate(1.5deg);}
      100% {transform: rotate(0deg);}
  }
  .b-ball_bounce:hover {
    -webkit-animation: ball_animation 1.5s;
    animation-iteration-count: 1;
  }
  </code></pre>
  
  <p>When mouse hover an element animation start. But when mouse leave, animation stops immediately. But I want to finish animation after mouse leave.</p>
  
  <p>This is example with help of JavaScript: <a href="http://codepen.io/Profesor08/pen/pvbzjX" rel="noreferrer">http://codepen.io/Profesor08/pen/pvbzjX</a>
  And I want to do the same with pure CSS3, there is how it looks now: <a href="http://codepen.io/Profesor08/pen/WbxeoW" rel="noreferrer">http://codepen.io/Profesor08/pen/WbxeoW</a></p>