When using the pseudo-class :target, how can I reverse the animation?

Problem

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.

#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;
}

Here is the jsfiddle: Click me =)

Problem courtesy of: Oussama Dooby

Solution

The only way to "reverse" the application of :target that I'm aware of is to change the fragment in the link (or otherwise add a new class or something).

Aside from some <input> elements, there's no way to make state changes without a light application of JavaScript.

UPDATED DEMO

Edit

Here's an updated demo using a <input type="checkbox"> with :checked instead of :target that does not involve JavaScript. YMMV depending on required browser support.

#arrow {
    position: absolute;
    left: -9999px; /* hide the checkbox off-screen */
    z-index: 2;
}

#arrow:before {
    width: 96px;
    height: 104px;
    position: absolute;
    top: 2px;
    left: 9999px; /* undo the checkbox offset */
    display: block;
    content: ' ';
    background: url(http://s23.postimg.org/s6m0zb4ev/arrow.png) no-repeat;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

#arrow:checked:before {
    -moz-transform: scale(1.2) rotate(45deg); 
    -webkit-transform: scale(1.2) rotate(45deg); 
    transform: scale(1.2) rotate(45deg);  
}
Solution courtesy of: André Dion

Discussion

You can set another anchor under the arrow, and after the arrow has been clicked, swap z-index so that the next click goes to this one.

Then the active would be "noarrow", and not arrow.

body{
background-color: black;
}

.logo{
background:transparent url('http://s23.postimg.org/7xyndl53r/trans_bg.png') repeat center top;
height: 200px;
}

.arrow{
position: relative;
z-index:2;}

.text{
position: absolute;
z-index: 1;
margin-top: 1.6em !important;
margin-left: 3em;}



#arrow img {
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;
  transition: all 1s ease-in-out;
}

#arrow:target img, #arrow:focus img {
transform: scale(1.2) rotate(45deg);
-ms-transform: scale(1.2) rotate(45deg); 
-webkit-transform: scale(1.2) rotate(45deg); 
margin-top: 1em;
}

#arrow:target, #arrow:target div , #arrow:target img {
 z-index: -99;    
}


#text{
z-index: 1;
position: absolute;
}

.noarrow {
    width: 200px;    
    height: 200px;
    z-index: 1;
}

demo

Discussion courtesy of: vals

The :target selector is simply applying the styles to the image when the image is the target, which it is on click of the anchor as the images ID is the href of the anchor.

So by clicking the anchor again, it is still the same target so the styles will still be applied, it is not toggling them. This is the exact expected behaviour.

Can you not just use JS to toggle a class instead?

Discussion courtesy of: lee_gladding

This recipe can be found in it's original form on Stack Over Flow.