CSS-Animation, beim Klicken drehen umschalten

Ich versuche, das Caretzeichen im Folgenden um 180 Grad zu drehen, wenn Sie auf mein Dropdown-Menü klicken. In der Lösung, die ich zu implementieren versuche, ändert es die Klasse des Caret-Zeichens, um beim Klicken nach oben oder unten umzuschalten. Beim ersten Anklicken dreht es sich nach oben, beim zweiten Mal geht es sofort wieder in seine Ausgangsposition zurück und dreht sich dann wieder nach oben. Ich rieche schmutzigen Code, was ist der einfachste Weg, diese Toggle-Rotationsanimation hinzuzufügen. Vielen Dank im Voraus für jede Hilfe.
Heres mein aktuelles CSS:

.toggle-up {
  animation-name: toggle-up;
  animation-delay: 0.25s;
  animation-duration: 0.75s;
  animation-fill-mode: forwards;
}
.toggle-down {
  animation-name: toggle-down;
  animation-delay: 0.25s;
  animation-duration: 0.75s;
  animation-fill-mode: forwards;
}

/*animations*/
@keyframes toggle-up {
  100% {
    transform: rotate(180deg);
  }
}
@keyframes toggle-down {
  100% {
    transform: rotate(180deg);
  }
}

Für so etwas Einfaches braucht man eigentlich keine Keyframe-Animation. Wenn Sie Ihrem Symbol beim Klicken einfach eine Klasse hinzufügen und sie dann entfernen, wird dies Ihre Drehung anwenden. Hier ist ein funktionierender Plunkr, der Font Awesome und eine einfache Drehung verwendet. Dies ist nur ein einfaches Beispiel. Sie sollten Herstellerpräfixe verwenden und sich darüber im Klaren sein, dass CSS-Übergänge in älteren Browsern nicht funktionieren.

<div id="container">
    <i id="icon" class="fa fa-arrow-down"></i>
</div>

.fa-arrow-down{
  transform: rotate(0deg);
  transition: transform 1s linear;
}

.fa-arrow-down.open{
  transform: rotate(180deg);
  transition: transform 1s linear;
}

(function(document){
  var div = document.getElementById('container');
  var icon = document.getElementById('icon');
  var open = false;

  div.addEventListener('click', function(){
    if(open){
      icon.className="fa fa-arrow-down";  
    } else{
      icon.className="fa fa-arrow-down open";
    }

    open = !open;
  });
})(document);

.square {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  transition: all 0.75s 0.25s;
}

.toggle-up {
  transform: rotate(180deg);
}

.toggle-down {
  transform: rotate(0);
}

Sie sollten einen Anfangszustand haben, um Ihre Animation abzuschließen.

Hier ist das Beispiel: Codestift

AKTUALISIEREN

Hier ist die Version ohne Verwendung von Javascript: Codestift

<label for="checkbox">
  <input type="checkbox" id="checkbox">
  <div class="square toggle-down"></div>
</label>


#checkbox {
  display: none;
}

.square {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  transition: all 0.75s 0.25s;
  transform: rotate(0);
}

#checkbox:checked + .square {
  transform: rotate(180deg);
}

Die allgemeine Idee ist, die Blockklasse mit zu ändern Selektoren für benachbarte Geschwister und das Kontrollkästchen überprüft Zustand.