title: Complete animation on class removal
body: <p>I have something similar to this in my project:
  <a href="http://codepen.io/anon/pen/AqfCg" rel="nofollow">http://codepen.io/anon/pen/AqfCg</a></p>
  
  <p>If you click toggle, animation starts nice, but when you click it again, animation is stopped and rotation is set to 0 instantly. Is there any way  I can make animation stop slowly or at least wait until is rotated to 0?</p>
  
  <p>ps. I'm <strong>not</strong> looking for javascript/jquery solution and I want it to be only CSS3+HTML (I used jquery only to demonstrate what am I trying to achieve)</p>