title: How do I reverse this CSS rotate animation?
body: <p>I have this CSS animation which I'm trying to reverse the animation of based on a class being added to a DOM node. I've tried multiple things but with no avail. Here is the code I'm using, see below:</p>
  
  <p><a href="http://jsfiddle.net/Ugc5g/890/" rel="nofollow">EXAMPLE</a></p>
  
  <pre><code>    // Closed state
      @-moz-keyframes spin-close { 100% { -moz-transform: rotate(-0deg); } }
      @-webkit-keyframes spin-close { 100% {  -webkit-transform: rotate(-0deg); } }
      @keyframes spin-close { 100% { transform:rotate(-0deg); } }
  
      // Open state
      @-moz-keyframes spin-open { 100% { -moz-transform: rotate(-90deg); } }
      @-webkit-keyframes spin-open { 100% { -webkit-transform: rotate(-90deg); } }
      @keyframes spin-open { 100% { transform:rotate(-90deg); } }
  </code></pre>
  
  <p>I don't know whether I'm looking at it all wrong? Please advise(a demo would be awesome). </p>