title: How to make a CSS animation slow to a stop on hover out?
body: <p>I have a CSS animation that rotates a div infinitely when I hover over it. The CSS looks something like this:</p>
  
  <pre><code>@-webkit-keyframes rotate {
      from { -webkit-transform: rotate(0deg); }
      to { -webkit-transform: rotate(360deg); }
  }
  
  #square {
      background-color: #369;
      height: 100px;
      margin: 50px;
      width: 100px;
      -webkit-transform: rotate(0deg);
  }
  
  #square:hover {
      -webkit-animation: rotate 5s linear infinite;
  }
  </code></pre>
  
  <p>The problem that I'm trying to solve is that when I hover out, it abruptly jumps back to its original state. This can be jarring when it's in the middle of the animation. Is there a way to <em><strong>slowly</strong></em> transition back to the original state? Normally, you can do that sort of thing with transitions, but it doesn't seem to work in conjunction with animations. For example, I tried adding <code>-webkit-transition: all 2s;</code> to the <code>#square</code> selector in the example above, but it didn't do anything.</p>
  
  <p>Example: <a href="http://jsfiddle.net/93jeS/" rel="noreferrer">http://jsfiddle.net/93jeS/</a></p>