title: Stop CSS rotate animation smoothly on unknown keyframe
body: <p>I have an image that swings using CSS rotate animation.
  I would like to stop it smoothly (and put it back to its original position when clicking on another element but without getting the jumpy stop feeling).
  It seems that the expected behaviour only happens on the first iteration of the animation but not on the upcoming ones (this is when clicking on the "slow" button during the first 2 seconds)</p>
  
  <p>Here is a sample code
  <a href="https://jsfiddle.net/pbarrientos/5v3xwak6/" rel="nofollow">https://jsfiddle.net/pbarrientos/5v3xwak6/</a></p>
  
  <p>I have already tried adding animation-iteration-count: 1;
  and adding/removing classes.</p>
  
  <pre><code>var css = { 
          '-webkit-animation-iteration-count': "1",
          '-moz-animation-iteration-count': "1",
          'animation-iteration-count': "1"
      }
  </code></pre>
  
  <p>Clues anyone?</p>