title: CSS3: Smooth transition between animations change on :hover
body: <p>I have an elements that has infinite css3 animation that is changed to another infinite animation when element is hovered. Everything is ok, but sometimes animation changing is too bouncy, is there a way to make transition between animations smooth (maybe bringing element to the initial state between animations) on mouseenter and mouseleave? The starting and ending states of both animations are the same.</p>
  
  <pre><code>@keyframes first-animation {
  0% { transform: scale3d(1,1,0);}
  50% { transform: scale3d(0.8,0.8,0); }
  100% { transform: scale3d(1,1,0); }
  };
  
  @keyframes second-animation {
  0% { transform: scale3d(1,1,0); }
  70% { transform: scale3d(0.7,0.7,0); }
  80% { transform: scale3d(0.9,0.9,0); }
  100% { transform: scale3d(1,1,0);  }
  };
  
  div{
  animation: first-animation 1.7s ease-in-out infinite;
  }
  
  div:hover, div:focus{
  animation: second-animation 1.1s ease-in-out infinite;
  }
  </code></pre>