CSS-Animation rückgängig machen (reverse)

[Christian W]

Hallo,

ich habe ein icon welches ich beim Klick drehen möchte. Dieses soll am Ende in dem gedrehten Zustand bleiben, und beim erneute klicken, sich wieder zurückdrehen, die Animation also rückgängig machen. Beim Klick wird dem Element die Klasse rotate hinzugefügt, und wieder entfernt.

.rotate {
    transition: all 500ms;
    transform: rotate(0deg);
    animation: up-side-down 500ms forwards ease-in-out;
}

@keyframes up-side-down {
    100% { transform: rotate(180deg); }
}

Was genau mache ich falsch?

Besten Dank,
Christian

[Gunnar Bittersmann]

@@Christian W

Du willst nur eins einsetzen: animation oder transition.

Transition 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 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

LLAP 🖖

[Christian W]

Besten Dank!