11 Animationen und Transitionen

11.1 Transitionen

Transitionen in CSS ermöglichen weiche Übergänge von einer Stil-Eigenschaft zu einer anderen. Sie verbessern die Benutzererfahrung, indem sie Bewegungen und Änderungen im Layout oder Styling harmonisch gestalten, beispielsweise beim Hover-Effekt, beim Anklicken von Buttons oder beim Wechsel von Layouts. Transitionen bieten eine einfache Möglichkeit, animierte Effekte zu implementieren, ohne dass dafür JavaScript erforderlich ist.

11.1.1 Grundlegende Syntax für Transitionen

Eine Transition besteht aus vier Hauptparametern: transition-property, transition-duration, transition-timing-function und transition-delay.

.element {
    transition: property duration timing-function delay;
}

• property: Die CSS-Eigenschaft, die animiert werden soll (z. B. opacity, background-color).
• duration: Die Dauer des Übergangs (z. B. 0.5s für eine halbe Sekunde).
• timing-function: Die Geschwindigkeit der Übergangsanimation (z. B. ease, linear, ease-in-out).
• delay: Die Verzögerung vor dem Start der Animation (z. B. 0.3s für eine Verzögerung von 300 Millisekunden).

11.1.1.1 Beispiel für eine Transition

.button {
    background-color: #3498db;
    transition: background-color 0.3s ease-in-out;
}

.button:hover {
    background-color: #2ecc71;
}

In diesem Beispiel ändert die background-color-Eigenschaft beim Hover-Event ihre Farbe von Blau zu Grün über eine Dauer von 0,3 Sekunden und nutzt dabei die ease-in-out-Funktion für einen sanften Start und Stopp.

11.1.2 Einzelne Transition-Eigenschaften

11.1.2.1 transition-property

Mit transition-property wird festgelegt, welche CSS-Eigenschaft(en) animiert werden sollen. Mehrere Eigenschaften können durch Kommas getrennt angegeben werden.

.element {
    transition-property: background-color, width;
}

In diesem Beispiel werden die background-color- und width-Eigenschaften animiert.

11.1.2.2 transition-duration

transition-duration legt die Dauer des Übergangs fest. Diese kann für jede Eigenschaft einzeln definiert werden.

.element {
    transition-duration: 0.5s, 1s; /* 0.5s für die erste Eigenschaft, 1s für die zweite */
}

11.1.2.3 transition-timing-function

transition-timing-function definiert die Beschleunigungskurve der Animation, um den Übergang dynamischer zu gestalten.

• ease: Weicher Start, Beschleunigung und langsamer Stopp.
• linear: Konstante Geschwindigkeit.
• ease-in: Langsamer Start, dann Beschleunigung.
• ease-out: Langsamer Stopp.
• ease-in-out: Langsamer Start und Stopp.

.element {
    transition-timing-function: ease-out;
}

11.1.2.4 transition-delay

Mit transition-delay lässt sich eine Verzögerung vor dem Start der Transition definieren.

.element {
    transition-delay: 0.2s;
}

In diesem Beispiel verzögert sich die Animation um 0,2 Sekunden.

11.1.3 Übergang für mehrere Eigenschaften

Alle Übergangsparameter können auch kombiniert für mehrere Eigenschaften definiert werden. Dies ermöglicht mehr Kontrolle über die Reihenfolge und Dauer der einzelnen Übergänge.

.element {
    transition: background-color 0.5s ease, width 1s linear 0.2s;
}

Hier ändert background-color seine Farbe in 0,5 Sekunden mit ease, während width 1 Sekunde mit linear benötigt und eine Verzögerung von 0,2 Sekunden hat.

11.1.4 Beispiel für ein komplettes Transition

.box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    transition: width 0.5s ease-in-out, height 0.5s ease-in-out, background-color 0.5s linear;
}

.box:hover {
    width: 150px;
    height: 150px;
    background-color: #e74c3c;
}

In diesem Beispiel werden die Breite, Höhe und Hintergrundfarbe gleichzeitig über einen Zeitraum von 0,5 Sekunden geändert, wobei unterschiedliche timing-functions für den Übergang genutzt werden.

11.1.5 Tipps für den Einsatz von Transitionen

• Kurze Dauer für schnelle Animationen: Übergänge zwischen 0,2s und 0,5s wirken in der Regel harmonisch.
• Beschleunigungskurve passend wählen: ease und ease-in-out bieten oft angenehmere Bewegungen als linear.
• Fokus auf Benutzeraktionen: Transitionen sollten auf Aktionen wie hover, focus oder active reagieren, um die Interaktivität zu unterstützen.
• Begrenzung auf wesentliche Eigenschaften: Zu viele oder zu lange Transitionen können die Benutzererfahrung beeinträchtigen.

11.2 Keyframe-Animationen

Keyframe-Animationen in CSS bieten die Möglichkeit, komplexe, mehrstufige Animationen zu erstellen. Sie erlauben es, CSS-Eigenschaften schrittweise über einen festgelegten Zeitraum zu ändern, indem bestimmte Zwischenzustände definiert werden. Keyframe-Animationen ermöglichen flexible Bewegungen, Transformationen und Anpassungen von Stilen, die über einfache Transitionen hinausgehen.

11.2.1 Grundlegende Syntax von Keyframe-Animationen

Keyframe-Animationen werden mit dem @keyframes-Regelsatz definiert. Innerhalb dieser Regel werden die verschiedenen Animationszustände mit Prozentsätzen (von 0% bis 100%) oder den Schlüsselwörtern from und to angegeben.

@keyframes animation-name {
    0% {
        /* Startzustand */
    }
    100% {
        /* Endzustand */
    }
}

Um die Keyframe-Animation auf ein Element anzuwenden, werden die Eigenschaften animation-name und animation-duration benötigt.

11.2.1.1 Beispiel einer einfachen Keyframe-Animation

@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.element {
    animation-name: slideIn;
    animation-duration: 1s;
}

In diesem Beispiel wird das Element von links nach rechts über eine Dauer von 1 Sekunde eingeblendet.

11.2.2 Detaillierte Kontrolle mit mehreren Keyframes

Mit Keyframe-Animationen können beliebig viele Zwischenzustände festgelegt werden, um eine Animation genauer zu steuern.

@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-30px);
    }
    100% {
        transform: translateY(0);
    }
}

.element {
    animation-name: bounce;
    animation-duration: 0.5s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}

In diesem Beispiel wird das Element wie ein springender Ball animiert, indem es in der Mitte der Animation nach oben bewegt und dann zurück zur Ausgangsposition gebracht wird.

11.2.3 Eigenschaften für Keyframe-Animationen

11.2.3.1 animation-name

Der Name der Animation, der mit der @keyframes-Regel übereinstimmen muss.

animation-name: bounce;

11.2.3.2 animation-duration

Die Dauer der Animation. Sie legt fest, wie lange die gesamte Animation dauert (z. B. 2s für 2 Sekunden).

animation-duration: 2s;

11.2.3.3 animation-timing-function

Die animation-timing-function definiert die Geschwindigkeitskurve der Animation. Gängige Werte sind ease, linear, ease-in, ease-out, ease-in-out oder benutzerdefinierte Werte wie cubic-bezier.

animation-timing-function: ease-in-out;

11.2.3.4 animation-delay

Die Zeit, die vergeht, bevor die Animation beginnt.

animation-delay: 1s;

11.2.3.5 animation-iteration-count

Bestimmt, wie oft die Animation wiederholt wird. Akzeptierte Werte sind eine Zahl oder das Schlüsselwort infinite für unendliche Wiederholung.

animation-iteration-count: infinite;

11.2.3.6 animation-direction

Legt fest, ob die Animation in umgekehrter Richtung wiederholt werden soll.

• normal: Die Animation läuft bei jeder Wiederholung vorwärts (Standardwert).
• reverse: Die Animation läuft bei jeder Wiederholung rückwärts.
• alternate: Die Animation läuft abwechselnd vorwärts und rückwärts.
• alternate-reverse: Die Animation läuft abwechselnd rückwärts und vorwärts.

animation-direction: alternate;

11.2.3.7 animation-fill-mode

Legt fest, ob die Animation ihre Stilwerte vor und nach ihrer Ausführung beibehalten soll.

• none: Kein Fill-Modus (Standard).
• forwards: Behält den Endzustand der Animation bei.
• backwards: Behält den Anfangszustand der Animation bei, falls eine Verzögerung definiert ist.
• both: Kombination aus forwards und backwards.

animation-fill-mode: forwards;

11.2.4 Kurzschreibweise für Keyframe-Animationen

Alle Animationseigenschaften lassen sich in einer einzigen Zeile zusammenfassen.

.element {
    animation: bounce 1s ease-in-out 0.5s infinite alternate;
}

Die Kurzschreibweise umfasst in dieser Reihenfolge:

1. Name der Animation
2. Dauer
3. Timing-Funktion
4. Verzögerung
5. Wiederholungsanzahl
6. Richtung

11.2.5 Beispiel einer komplexen Keyframe-Animation

@keyframes colorChange {
    0% {
        background-color: #3498db;
        transform: scale(1);
    }
    50% {
        background-color: #2ecc71;
        transform: scale(1.2);
    }
    100% {
        background-color: #e74c3c;
        transform: scale(1);
    }
}

.element {
    animation: colorChange 3s ease-in-out infinite;
}

In diesem Beispiel ändert sich die Hintergrundfarbe und die Größe des Elements über eine Dauer von 3 Sekunden. Die Animation wird endlos wiederholt und verändert die Hintergrundfarbe und Skalierung in einem rhythmischen Übergang.

11.2.6 Tipps zur Verwendung von Keyframe-Animationen

• Einfache Timing-Funktionen: ease-in-out ist oft angenehmer für Benutzerinteraktionen als linear.
• Vermeidung übermäßiger Wiederholungen: Zu viele oder zu lange Animationen können die Benutzererfahrung beeinträchtigen.
• Optimierung für Performance: Verwende transform und opacity, da diese CSS-Eigenschaften effizienter animiert werden können als z. B. width und height.

11.3 Animations-Performance

Animations-Performance ist ein entscheidender Faktor für eine flüssige und reaktionsschnelle Benutzeroberfläche. Nicht optimierte Animationen können auf schwächeren Geräten und bei großen Datenmengen zu Ruckeln und Verzögerungen führen. CSS bietet Möglichkeiten, Animationen effizient zu gestalten, insbesondere durch die richtige Auswahl von animierten Eigenschaften und die Nutzung moderner Browser-Optimierungen.

11.3.1 Eigenschaften mit hoher Performance

Nicht alle CSS-Eigenschaften sind für Animationen gleich gut geeignet. Die transformierenden Eigenschaften wie transform und opacity sind besonders performant, da sie direkt von der GPU verarbeitet werden und keine Reflows oder Neuzeichnungen (Repaints) des gesamten Layouts verursachen. Andere Eigenschaften wie width, height, margin oder left führen dagegen oft zu aufwendigen Neuberechnungen des Layouts und sollten vermieden werden.

• Empfohlene Eigenschaften: transform, opacity
• Eigenschaften mit hoher Belastung: width, height, margin, padding, top, left, right, bottom

11.3.1.1 Beispiel für performante Animationen

.element {
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.element:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

11.3.2 GPU-beschleunigte Animationen

Moderne Browser verlagern transform und opacity-Animationen automatisch auf die GPU, was die Render-Performance verbessert. Die GPU kann schnellere, flüssigere Animationen darstellen, da sie sich auf das Rendering von Grafiken spezialisiert hat. Die Nutzung von translateX und translateY zur Verschiebung von Elementen ist z. B. deutlich effizienter als left und top.

.element {
    transition: transform 0.5s ease;
}

.element:hover {
    transform: translateX(100px);
}

11.3.3 will-change für Performance-Optimierung

Die will-change-Eigenschaft teilt dem Browser mit, dass eine CSS-Eigenschaft in Kürze animiert wird, wodurch der Browser vorab Optimierungen vornehmen kann. Dies sollte jedoch sparsam verwendet werden, da es Speicherressourcen beansprucht.

.element {
    will-change: transform, opacity;
}

In diesem Beispiel bereitet sich der Browser darauf vor, transform und opacity zu animieren, was die Performance verbessert, wenn diese Eigenschaften sich tatsächlich ändern.

11.3.4 Vermeidung von Layout-Änderungen und Reflows

Animationen, die das Layout verändern, zwingen den Browser dazu, die Position und Größe anderer Elemente neu zu berechnen. Dies verursacht Reflows und Repaints, die zu Leistungseinbußen führen. Eigenschaften wie width oder height sollten deshalb möglichst vermieden werden. Stattdessen sollten scale() oder translate() verwendet werden, um visuelle Effekte zu erzielen, ohne das Layout zu beeinflussen.

11.3.4.1 Ineffiziente Animation

.element {
    transition: width 0.5s ease;
}

.element:hover {
    width: 300px;
}

11.3.4.2 Effizientere Alternative

.element {
    transition: transform 0.5s ease;
}

.element:hover {
    transform: scaleX(1.5);
}

Die zweite Variante nutzt scaleX(), wodurch die Breite visuell verändert wird, ohne das Layout neu zu berechnen.

11.3.5 Reduzierung der Animations-Frequenz

Die Verwendung von requestAnimationFrame in JavaScript-basierten Animationen oder einer niedrigen Bildfrequenz für CSS-Animationen kann ebenfalls zur Performance-Optimierung beitragen. Zudem kann animation-timing-function: steps() verwendet werden, um flüssige Animationen gezielt auf weniger Frames pro Sekunde zu reduzieren.

11.3.6 Optimierungstipps für CSS-Animationen

• Vermeidung redundanter Animationen: Nur animieren, was notwendig ist, und nicht zu viele Elemente gleichzeitig.
• Nutzung moderner Browser-Funktionen: will-change und GPU-optimierte Eigenschaften wie transform und opacity.
• Vermeidung komplexer Layout-Anpassungen: Keine Animationen von Eigenschaften, die Reflows verursachen.
• Timing-Funktionen: ease oder ease-in-out sind häufig angenehmer und weniger belastend für das System als linear.