Animationen & Transitions
Bewegung kann führen oder ablenken. Gute Animationen sind kurz, erklären Zustände und respektieren Nutzereinstellungen.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
Transitions
transition verbindet zwei Zustände, etwa normal und :hover.
Eigenschaft, Dauer und Timing-Funktion bestimmen das Gefühl.
Animiere gezielt einzelne Eigenschaften statt all. So bleiben unerwartete Übergänge sichtbar und die Absicht klar.
.button {
background: #0f766e;
transition: background-color 180ms ease, transform 180ms ease;
}
.button:hover {
background: #115e59;
transform: translateY(-2px);
}Keyframes
@keyframes beschreibt mehrere Stationen.
animation verbindet Name, Dauer, Wiederholung und Füllmodus.
Für Ladeanzeigen reicht oft eine kurze, wiederholte Bewegung. Vermeide dauerhafte Animationen, die Inhalte schwer lesbar machen.
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.loading {
animation: pulse 1.2s ease-in-out infinite;
}Performance und Reduced Motion
transform und opacity lassen sich meist flüssig animieren.
Layout-Eigenschaften wie width oder top lösen häufiger Neuberechnungen aus.
prefers-reduced-motion respektiert Nutzer, die Bewegung reduzieren möchten. Deaktiviere dann nicht nur große Effekte, sondern auch endlose Animationen.
@media (prefers-reduced-motion: reduce) {
.loading {
animation: none;
}
.button {
transition: none;
}
}Vertiefung
Bewegung mit Absicht
Transitions eignen sich für Zustandswechsel, Keyframes für mehrstufige Abläufe. Beide sollten kurz und erklärend sein, nicht dauerhaft ablenken.
Animiere bevorzugt transform und opacity. Prüfe mit den DevTools, ob Frames verloren gehen, und respektiere prefers-reduced-motion.
.button {
transition: transform 180ms ease, background 180ms ease;
}
@keyframes pulse {
50% { opacity: 0.5; }
}
.loading {
animation: pulse 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.loading { animation: none; }
.button { transition: none; }
}Merksatz: Kurze Transitions erklären Zustände, Keyframes zeigen Abläufe. Performance und reduzierte Bewegung gehören zur Animation dazu.
Übungsaufgabe
Button mit Zustandsanimation
Baue einen Button mit Hover-Transition und eine Ladeanzeige mit Keyframes. Deaktiviere beides bei reduzierter Bewegung.
Das soll dein Programm können
- Transition für Hintergrund und transform
- @keyframes für die Ladeanzeige
- animation mit Dauer und Wiederholung
- prefers-reduced-motion beachten
- Nur transform und opacity animieren
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
Nutze transition: transform 180ms ease, background-color 180ms ease. Für die Ladeanzeige reicht eine opacity-Animation.
Lösung anzeigen
.button {
background: #0f766e;
transition: transform 180ms ease, background-color 180ms ease;
}
.button:hover {
background: #115e59;
transform: translateY(-2px);
}
@keyframes pulse {
50% { opacity: 0.45; }
}
.loading {
animation: pulse 1.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.button,
.loading {
transition: none;
animation: none;
}
}Warum funktioniert das?
transform und opacity lösen keine Layout-Neuberechnung aus. Die Media Query respektiert Nutzer, die Bewegung reduziert haben, und verhindert eine endlose Animation.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Design-System-Karte
Baue eine Karte mit Cascade Layers, Container Query, Fokusring und reduzierter Bewegung. Prüfe sie in einem schmalen und einem breiten Container.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.