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

i working on dropdown menu, , when click on image, scales , rotates. working well, when click on again, want return it's normale state.

#arrow {   z-index: 2;   position: absolute;   -webkit-transition: 1s ease-in-out;   -moz-transition: 1s ease-in-out;   -o-transition: 1s ease-in-out;   -ms-transition: 1s ease-in-out;   transition: 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 jsfiddle: click me =)

the way "reverse" application of :target i'm aware of change fragment in link (or otherwise add new class or something).

aside <input> elements, there's no way make state changes without light application of javascript.

updated demo

edit

here's updated demo using <input type="checkbox"> :checked instead of :target not involve javascript. ymmv depending on required browser support.

#arrow {     position: absolute;     left: -9999px; /* hide checkbox off-screen */     z-index: 2; }  #arrow:before {     width: 96px;     height: 104px;     position: absolute;     top: 2px;     left: 9999px; /* undo checkbox offset */     display: block;     content: ' ';     background: url(http://s23.postimg.org/s6m0zb4ev/arrow.png) no-repeat;     -webkit-transition: 1s ease-in-out;     -moz-transition: 1s ease-in-out;     -o-transition: 1s ease-in-out;     transition: 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);   }