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

Beitrag lesen

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