Einfacher Fade In / Fade Out beim Hover mit CSS3

In alten Zeiten (jQuery-Ära) nutzten wir .animate() oder .fadeIn() für Hover-Effekte. Im Jahr 2026 ist die Verwendung von JavaScript dafür ein Verbrechen an der Performance.

CSS3 transition ist hardwarebeschleunigt (von der GPU gehandhabt), weicher und erfordert null Skripte.

Warum CSS Transitions JavaScript schlagen

Performance-Vorteile:

• GPU-Beschleunigung: CSS-Transitions laufen auf der Grafikkarte, nicht auf der CPU
• Keine JavaScript-Ausführung: Null Skript-Overhead, sofortige Reaktion
• Browser-Optimierung: Browser optimieren CSS-Animationen nativ
• Batteriefreundlich: Weniger CPU-Nutzung bedeutet längere Akkulaufzeit auf Mobilgeräten

Grundlegender Fade-Effekt

Nehmen wir an, Sie haben ein Bild, das abdunkeln soll, wenn Sie mit der Maus darüberfahren.

/* Das Element */
.hover-image {
    opacity: 1;
    /* Der magische Teil */
    transition: opacity 0.3s ease-in-out;
}

/* Der Auslöser */
.hover-image:hover {
    opacity: 0.7;
}

Was passiert:

1. Bild startet bei opacity: 1 (voll sichtbar)
2. Beim Hover Übergang zu opacity: 0.7 (30% transparent)
3. Dauert 0,3 Sekunden mit weichem Easing
4. Kehrt zu opacity: 1 zurück, wenn Hover endet

Verstehen der Transition-Eigenschaften

transition-property

Gibt an, welche CSS-Eigenschaft animiert werden soll. Geben Sie immer spezifische Eigenschaften an statt all für bessere Performance.

/* Gut: Spezifische Eigenschaft */
transition: opacity 0.3s ease-in-out;

/* Besser: Mehrere spezifische Eigenschaften */

/* Vermeiden: Animiert ALLE Eigenschaften (Performance-Einbuße) */

transition-duration

Wie lange die Animation dauert. Übliche Werte:

/* Sehr schnell (subtil) */

/* Standard (Sweet Spot für UI) */

transition-timing-function

Kontrolliert die Beschleunigungskurve. Das macht Animationen “natürlich”.

/* Linear: Konstante Geschwindigkeit (robotisch) */

/* Ease: Langsamer Start, schnelle Mitte, langsames Ende (Standard) */

/* Ease-in-out: Langsamer Start und Ende, schnelle Mitte (sehr weich) */

Vollständige Kurzschreibweise

Beispiele:

/* Einzelne Eigenschaft */

/* Mit Verzögerung */

Fortgeschrittene Hover-Effekte

1. Fade + Skalieren (Zoom-Effekt)

Kombinieren Sie Opacity und Transform für einen modernen Zoom-Effekt:

.card-img {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.3s ease-in-out, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card-img:hover {
    opacity: 0.9;
    transform: scale(1.05);
}

2. Fade + Text überlagern

Perfekt für Bildergalerien:

.image-container img {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.image-container:hover img {
    opacity: 0.7;
}

Zusammenfassung

CSS-Transitions sind der moderne, performante Weg, um Hover-Effekte zu erstellen.

Wichtigste Erkenntnisse:

• Nutzen Sie spezifische Eigenschaften, nicht all
• 0,2-0,3s ist der Sweet Spot für UI-Interaktionen
• ease-out fühlt sich am natürlichsten an
• Nutzen Sie transform statt Position/Größe-Eigenschaften
• Testen Sie auf echten Geräten