Animationen & Transitions

Animationen machen Webseiten lebendig und interaktiv. Von sanften Hover-Effekten bis zu aufwaendigen Ladeanimationen — CSS bietet maechtige Werkzeuge, die frueher nur mit JavaScript moeglich waren.

Transitions: Sanfte Uebergaenge

Transitions animieren den Wechsel zwischen zwei Zustaenden (z.B. normal -> hover):

.button {
    background: #e44d26;
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    transition: background 0.3s ease;
}

.button:hover {
    background: #c0392b;
}

Die transition-Eigenschaft

.element {
    /* Kurzschreibweise: property duration timing-function delay */
    transition: background 0.3s ease 0s;

    /* Einzelne Eigenschaften */
    transition-property: background;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    transition-delay: 0s;
}

Mehrere Eigenschaften animieren

.card {
    transition: transform 0.3s ease,
                box-shadow 0.3s ease,
                background 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    background: #f8fafc;
}

/* Oder alles auf einmal */
.card {
    transition: all 0.3s ease;
    /* Achtung: "all" kann Performance-Probleme verursachen */
}

Timing-Funktionen

.linear { transition-timing-function: linear; }         /* Gleichmaessig */
.ease { transition-timing-function: ease; }              /* Standard, natuerlich */
.ease-in { transition-timing-function: ease-in; }        /* Langsam starten */
.ease-out { transition-timing-function: ease-out; }      /* Langsam enden */
.ease-in-out { transition-timing-function: ease-in-out; } /* Beides */

/* Eigene Kurve mit cubic-bezier */
.custom {
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    /* "Bounce"-Effekt */
}

Praktische Transition-Beispiele

/* Link-Unterstrich Animation */
a {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 2px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease;
}

a:hover {
    background-size: 100% 2px;
}

/* Button mit Glow */
.glow-btn {
    background: #e44d26;
    color: white;
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 8px;
    transition: box-shadow 0.3s ease;
}

.glow-btn:hover {
    box-shadow: 0 0 20px rgba(228, 77, 38, 0.5);
}

/* Input-Fokus */
input {
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.5rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus {
    border-color: #e44d26;
    box-shadow: 0 0 0 3px rgba(228, 77, 38, 0.2);
    outline: none;
}

@keyframes: Komplexe Animationen

Fuer Animationen mit mehreren Schritten:

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.element {
    animation: fadeIn 0.5s ease forwards;
}

Mehrere Schritte

@keyframes bounce {
    0% { transform: translateY(0); }
    25% { transform: translateY(-20px); }
    50% { transform: translateY(0); }
    75% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

.bouncy {
    animation: bounce 1s ease infinite;
}

Die animation-Eigenschaft

.element {
    /* Kurzschreibweise */
    animation: name duration timing-function delay iteration-count direction fill-mode;

    /* Beispiel */
    animation: fadeIn 0.5s ease 0s 1 normal forwards;

    /* Einzelne Eigenschaften */
    animation-name: fadeIn;
    animation-duration: 0.5s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;         /* oder "infinite" */
    animation-direction: normal;           /* oder reverse, alternate */
    animation-fill-mode: forwards;         /* Endzustand beibehalten */
    animation-play-state: running;         /* oder "paused" */
}

Wichtige animation-fill-mode Werte

Wert	Bedeutung
none	Element kehrt zum Ausgangszustand zurueck (Standard)
forwards	Element behält den Endzustand bei
backwards	Element zeigt den Startzustand waehrend der Verzoegerung
both	Kombination aus forwards und backwards

Praktische Animationsbeispiele

Pulsierender Button

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.pulse-btn {
    animation: pulse 2s ease infinite;
}

.pulse-btn:hover {
    animation: none; /* Stoppt bei Hover */
}

Lade-Spinner

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e2e8f0;
    border-top-color: #e44d26;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

Staggered Fade-In (versetzte Einblendung)

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card {
    opacity: 0;
    animation: fadeInUp 0.5s ease forwards;
}

.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.4s; }

Typing-Effekt

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink {
    50% { border-color: transparent; }
}

.typewriter {
    font-family: monospace;
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid #e44d26;
    width: 0;
    animation:
        typing 3s steps(30) forwards,
        blink 0.7s step-end infinite;
}

Transform: Elemente verwandeln

/* Verschieben */
.translate { transform: translate(10px, 20px); }
.translateX { transform: translateX(50px); }
.translateY { transform: translateY(-10px); }

/* Drehen */
.rotate { transform: rotate(45deg); }

/* Skalieren */
.scale { transform: scale(1.2); }         /* 120% */
.scaleX { transform: scaleX(0.5); }       /* Horizontal 50% */

/* Neigen */
.skew { transform: skewX(10deg); }

/* Kombinieren */
.combined {
    transform: translateY(-5px) rotate(2deg) scale(1.05);
}

Performance-Tipps

Nur performante Eigenschaften animieren

/* Gut (GPU-beschleunigt) */
.good {
    transition: transform 0.3s, opacity 0.3s;
}

/* Schlecht (loest Reflow aus) */
.bad {
    transition: width 0.3s, height 0.3s, margin 0.3s, padding 0.3s;
}

Performance	Eigenschaften
Sehr gut (Compositing)	transform, opacity
Mittel (Paint)	color, background, box-shadow
Schlecht (Layout)	width, height, margin, padding, top, left

will-change fuer komplexe Animationen

.animated-element {
    will-change: transform, opacity;
    /* Nur verwenden wenn noetig -- nicht ueberall! */
}

Barrierefreiheit: Reduzierte Bewegung

/* Immer hinzufuegen! */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

Scroll-gesteuerte Animationen

Moderne Browser unterstuetzen Animationen, die vom Scroll-Position gesteuert werden:

@keyframes fadeInOnScroll {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.scroll-reveal {
    animation: fadeInOnScroll linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
}

Uebungen

Uebung 1: Hover-Effekte

Erstelle 5 verschiedene Button-Hover-Effekte:

• Farbe wechseln
• Hoch-schweben mit Schatten
• Unterstrich-Animation
• Glow-Effekt
• Scale mit Rotation

Uebung 2: Lade-Animation

Erstelle eine kreative Lade-Animation mit @keyframes. Ideen: Drei springende Punkte, ein pulsierender Kreis oder ein sich fuellender Balken.

Uebung 3: Card Entrance

Erstelle ein Card-Grid, bei dem die Karten mit versetztem Timing nacheinander eingeblendet werden (Staggered Animation).

Was kommt als Naechstes?

Im naechsten Kapitel lernst du Pseudo-Klassen und Pseudo-Elemente:

• :hover, :focus, :active und mehr
• ::before und ::after fuer dekorative Elemente
• Moderne Pseudo-Klassen wie :has() und :is()

Zusammenfassung

• Transitions animieren zwischen zwei Zustaenden (z.B. hover)
• @keyframes ermoeglicht mehrstufige, komplexe Animationen
• Timing-Funktionen steuern die Geschwindigkeitskurve
• animation-fill-mode: forwards behaelt den Endzustand bei
• Animiere nur transform und opacity fuer beste Performance
• prefers-reduced-motion respektiert Nutzer, die weniger Bewegung wollen
• Scroll-gesteuerte Animationen mit animation-timeline: view() sind die Zukunft

---