Sanfte Übergänge in CSS – Hover-Effekte mit transition statt harter Sprünge
Ein guter Hover-Effekt springt nicht, er gleitet. Mit transition animierst du Farbe, Größe und Schatten weich – in einer Zeile. Ich zeige das Muster, warum du niemals transition: all nimmst und wie du Nutzer mit Bewegungsempfindlichkeit respektierst.
Ein Button, der beim Überfahren einfach die Farbe wechselt, wirkt hart. Derselbe Button mit einem weichen Übergang wirkt sofort hochwertiger – und das kostet eine Zeile CSS.
Das Grundmuster
.btn {
background: #2563eb;
transform: translateY(0);
box-shadow: 0 2px 6px rgb(0 0 0 / 0.15);
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover {
background: #1d4ed8;
transform: translateY(-2px); /* hebt sich leicht an */
box-shadow: 0 6px 16px rgb(0 0 0 / 0.25); /* Schatten wird größer */
}transition gehört auf den Normalzustand, nicht auf :hover – so gleitet der Effekt in beide Richtungen (rein und wieder raus). Die drei Werte je Eigenschaft sind: was, wie lange, mit welcher Kurve.
Nimm nie transition: all
transition: all 0.2s ease; /* ⚠️ animiert versehentlich ALLES */all sieht bequem aus, animiert aber auch Eigenschaften, die du gar nicht meinst – das kostet Performance und kann ruckeln. Zähl lieber die zwei, drei Eigenschaften auf, die du wirklich änderst. Am flüssigsten laufen dabei transform und opacity, weil der Browser sie besonders effizient rendert.
Nutzer mit Bewegungsempfindlichkeit respektieren
Manche Menschen reagieren empfindlich auf Bewegung. Ein kurzer Media-Query schaltet Animationen für sie ab:
@media (prefers-reduced-motion: reduce) {
.btn { transition: none; }
}Das ist gute Praxis und in vielen Kontexten sogar Teil der Barrierefreiheit.
Weiche Übergänge sind der günstigste Weg, eine Seite „teurer" wirken zu lassen. Mehr HTML- & CSS-Snippets gibt's auf code.bymw.de.
Quellen
Du brauchst mehr als ein Snippet?
Ich entwickle Android-Apps in Kotlin und moderne Websites für Selbstständige und kleine Unternehmen — von der ersten Idee bis zum Release.
Projekt anfragen →Verwandte Snippets
@layer in CSS: Kaskadenebenen statt !important-Wettrüsten
Irgendwann steht in jedem gewachsenen Stylesheet das erste !important – und ein halbes Jahr später das dreißigste. Mit @layer legst du die Reihenfolge einmal fest, und ab da gewinnt nicht mehr der längste Selektor, sondern die Ebene, die du bestimmt hast.
Tooltips ohne JavaScript – CSS Anchor Positioning
Ein Tooltip an einen Button hängen, der ausweicht, wenn oben kein Platz ist, und nicht am overflow: hidden der Elternbox scheitert – das brauchte jahrelang eine Bibliothek. Seit Firefox 147 kann das jeder große Browser in reinem CSS.
Schöne Zeilenumbrüche in CSS – text-wrap balance und pretty
Eine Überschrift, bei der ein einzelnes Wort einsam in der letzten Zeile hängt, sieht unruhig aus. Mit text-wrap balance und pretty überlässt du dem Browser das saubere Umbrechen – ohne manuelle <br> und ohne JavaScript.