Sanfte Übergänge in CSS – Hover-Effekte mit transition statt harter Sprünge

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.