title: Smooth CSS Transition Animation Rotation
body: <p>I have created this fiddle to demonstrate the problem:</p>
  
  <p><a href="http://jsfiddle.net/NfX56/" rel="noreferrer">http://jsfiddle.net/NfX56/</a></p>
  
  <p>Animation ROTATION and HOVER seems to work fine for changing direction but the TOGGLE when I hover over the item for transition is jumpy and not a smooth reverse of direction like I would like.</p>
  
  <p>Here is the basic code without browser prefix:</p>
  
  <pre><code>@keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }
  .spin {
      animation: spin 3.5s linear 0s infinite normal;
      width: 100px;
      height: 100px;
      border-radius: 50px 50px 50px 50px;
      overflow: hidden;
      margin-left: -50px;
      margin-top: -50px;
      top: 50%;
      left: 50%;
      position: absolute;
  }
  .spin:hover {
      animation: spin 3.5s linear 0s infinite reverse;
  }
  </code></pre>
  
  <p>I have been trying to play around with the following:</p>
  
  <pre><code>transition-property: transform;
  transition-duration: 0s;
  transition-timing-function: ease-in-out;
  </code></pre>
  
  <p>In an attempt to smooth the animation so that the symbol smoothly reverses direction but I can't quite seem to get it right... any help would be great!</p>
  
  <p><a href="http://jsfiddle.net/NfX56/" rel="noreferrer">http://jsfiddle.net/NfX56/</a></p>