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
prefers-reduced-motion – Animationen, die niemandem übel werden
Manche Menschen bekommen von bewegten Oberflächen Schwindel oder Übelkeit. Ihr Betriebssystem weiß das längst – mit einer Media Query fragst du es einfach ab und lieferst dieselbe Seite ohne Bewegung aus.
:is() und :where() – kürzere Selektoren, und einer davon wiegt nichts
Drei fast gleiche Selektoren untereinander, nur weil die Überschrift mal h2 und mal h3 heißt? :is() fasst das zusammen. Und :where() macht dasselbe, ohne die Spezifität hochzutreiben – der Unterschied ist der ganze Trick.
content-visibility – lange Seiten rendern, ohne dass der Browser alles auf einmal baut
Bei sehr langen Seiten rechnet der Browser Layout und Malen für jeden Abschnitt – auch für die, die 8.000 Pixel weiter unten liegen. Eine CSS-Eigenschaft verschiebt diese Arbeit auf den Moment, in dem sie gebraucht wird.