@@Christian W Du willst nur eins einsetzen: *animation*{: @en} oder *transition*{: @en}. *Transition*{: @en} ist – wie der Name schon sagt – für den Übergang von einem Zustand zum anderen, also das was du willst: von `rotate(0deg)` zu `rotate(180deg)`. Wenn die *transition*{: @en} für beide Richtungen sein soll, musst du sie für das Element angeben – sie soll ja eben auch wirken, wenn das Element die Klasse `rotate` nicht hat. (Ich würde die Klasse eher `rotated` nennen – oder noch besser nicht nach der Darstellung, sondern danach, *warum* das Ding gedreht ist.) ☞ [Codepen](https://codepen.io/gunnarbittersmann/pen/RZeBQj) LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)

@@Christian W Du willst nur eins einsetzen: *animation*{: @en} oder *transition*{: @en}. *Transition*{: @en} ist – wie der Name schon sagt – für den Übergang von einem Zustand zum anderen, also das was du willst: von `rotate(0deg)` zu `rotate(180deg)`. Wenn die *transition*{: @en} für beide Richtungen sein soll, musst du sie für das Element angeben – sie soll ja eben auch wirken, wenn das Element die Klasse `rotate` nicht hat. (Ich würde die Klasse eher `rotated` nennen.) ☞ [Codepen](https://codepen.io/gunnarbittersmann/pen/RZeBQj) LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)