html - 疑似クラス :target を使用する場合、アニメーションを反転するにはどうすればよいですか?

Question

ドロップダウン メニューを作成しています。画像をクリックすると、拡大縮小と回転が行われます。これはすべてうまく機能していますが、もう一度クリックすると、通常の状態に戻ります。

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

これがjsfiddleです：クリックしてください=）