Eine Transition lässt eine Änderung über eine Dauer laufen, statt sie springen zu lassen. Zwei Zeilen genügen.
- Transition (Übergang)
Eigenschaft, die eine Wertänderung über eine Dauer verteilt statt sie springen zu lassen.
Beispiel: „Eine Transition braucht einen Auslöser, etwa einen Zustandswechsel.“Auch: Übergang.
Wie sie notiert wird
.karte {
transition: border-color 200ms ease, transform 200ms ease;
}
.karte:hover {
border-color: #0078ff;
transform: translateY(-2px);
}Die Angabe gehört an den Ruhezustand, nicht an den Hover; sonst läuft der Übergang nur hin und springt zurück. Einzelne Eigenschaften zu benennen ist besser als all, das auch Änderungen überblendet, die man nicht gemeint hat.
Was sich nicht überblenden lässt
Wechsel zwischen display: none und sichtbar sind sprunghaft; dafür braucht es neuere Eigenschaften oder einen Umweg über Transparenz und Höhe. Und: Wer in den Systemeinstellungen weniger Bewegung wünscht, sollte sie bekommen.
@media (prefers-reduced-motion: reduce) {
* { transition-duration: 0.01ms !important; }
}