title: When using the pseudo-class :target, how can I reverse the animation?
body: <p>I am working on a dropdown menu, and when I click on an image, it scales and rotates.
  This is all working well, but when I click on it again, I want it to return to it's normale state.</p>
  
  <pre><code>#arrow {
    z-index: 2;
    position: absolute;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
  }
  
  #arrow:target {
    transform: scale(1.2) rotate(45deg);
    -ms-transform: scale(1.2) rotate(45deg); 
    -webkit-transform: scale(1.2) rotate(45deg);
    -moz-transform: scale(1.2) rotate(45deg);
    -o-transform: scale(1.2) rotate(45deg);
    margin-top: 1em;
  }
  </code></pre>
  
  <p>Here is the jsfiddle: <a href="http://jsfiddle.net/R6Cp5/" rel="nofollow">Click me =)</a></p>