de:modul:m291:learningunits:lu12:theorie:b_keyframes

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Nächste Überarbeitung		 Vorhergehende Überarbeitung
de:modul:m291:learningunits:lu12:theorie:b_keyframes [2026/05/18 00:19] – angelegt gkochde:modul:m291:learningunits:lu12:theorie:b_keyframes [2026/05/18 00:35] (aktuell) – gkoch
Zeile 1: Zeile 1:
-====== Theorie: CSS Keyframe Animationen ======+====== LU12b - CSS Keyframe Animationen ======
  
 In dieser Lerneinheit lernen Sie, wie CSS Keyframe Animationen funktionieren — und wie Sie diese sinnvoll in eine Vue.js-Applikation integrieren. In dieser Lerneinheit lernen Sie, wie CSS Keyframe Animationen funktionieren — und wie Sie diese sinnvoll in eine Vue.js-Applikation integrieren.
Zeile 7: Zeile 7:
  
 CSS bietet zwei Wege, um Animationen zu erstellen. Der Unterschied liegt im Auslöser und in der Komplexität: CSS bietet zwei Wege, um Animationen zu erstellen. Der Unterschied liegt im Auslöser und in der Komplexität:
 +
 +<WRAP center round box 80%>
  
 ^ Merkmal               ^ ''transition''                           ^ ''@keyframes'' + ''animation''               ^ ^ Merkmal               ^ ''transition''                           ^ ''@keyframes'' + ''animation''               ^
 | Auslöser              | Zustandsänderung (z. B. '':hover'')      | Läuft automatisch oder per Klasse           | | Auslöser              | Zustandsänderung (z. B. '':hover'')      | Läuft automatisch oder per Klasse           |
-| Zwischenschritte      | Nur Start → Ende (zwei Zustände)         | Beliebig viele Stationen (''0%'', ''50%'', ''100%'') |+| Zwischenschritte      | Nur Start → Ende (zwei Zustände)         | Beliebig viele Zwischenschritte (''0%'', ''50%'', ''100%'') |
 | Wiederholung          | Nicht möglich                            | ''infinite'' oder beliebig oft              | | Wiederholung          | Nicht möglich                            | ''infinite'' oder beliebig oft              |
 | Typische Anwendung    | Hover-Effekte, UI-Feedback               | Ladeanimationen, Einblendungen, Aufmerksamkeit | | Typische Anwendung    | Hover-Effekte, UI-Feedback               | Ladeanimationen, Einblendungen, Aufmerksamkeit |
 +</WRAP>
 **Faustregel:** Brauchen Sie mehr als zwei Zustände, oder soll die Animation von selbst laufen? → ''@keyframes''. **Faustregel:** Brauchen Sie mehr als zwei Zustände, oder soll die Animation von selbst laufen? → ''@keyframes''.
  
Zeile 21: Zeile 23:
 Eine Keyframe Animation besteht immer aus zwei Teilen: Eine Keyframe Animation besteht immer aus zwei Teilen:
  
-**1. Der ''@keyframes''-Block** — definiert die Stationen der Animation: +**1. Der ''@keyframes''-Block** — definiert die Zwischenschritte der Animation: 
 +<WRAP center round box 80%>
 <code css> <code css>
 @keyframes meinAnimation { @keyframes meinAnimation {
Zeile 30: Zeile 32:
 } }
 </code> </code>
 +</WRAP>
  
 **2. Die ''animation''-Property** — verbindet den Block mit einem Element: **2. Die ''animation''-Property** — verbindet den Block mit einem Element:
 +<WRAP center round box 80%>
 <code css> <code css>
 .element { .element {
Zeile 39: Zeile 42:
 } }
 </code> </code>
 +</WRAP>
 Die ''animation''-Shorthand-Property fasst mehrere Werte zusammen: Die ''animation''-Shorthand-Property fasst mehrere Werte zusammen:
 +<WRAP center round box 80%>
 <code> <code>
 animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode]; animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode];
 </code> </code>
 +</WRAP>
  
 ===== Keyframes vereinfachen: Partial Keyframes ===== ===== Keyframes vereinfachen: Partial Keyframes =====
  
 Sie müssen nicht immer ''from'' / ''0%'' und ''to'' / ''100%'' angeben. Wenn nur ein Endpunkt definiert wird, startet die Animation automatisch vom **aktuellen CSS-Wert** des Elements: Sie müssen nicht immer ''from'' / ''0%'' und ''to'' / ''100%'' angeben. Wenn nur ein Endpunkt definiert wird, startet die Animation automatisch vom **aktuellen CSS-Wert** des Elements:
 +<WRAP center round box 80%>
 <code css> <code css>
 /* Ausführlich: */ /* Ausführlich: */
Zeile 63: Zeile 66:
 } }
 </code> </code>
 +</WRAP>
 Dieser **Partial Keyframes-Trick** spart Code, wenn der Startwert dem CSS-Default des Elements entspricht. Er funktioniert auch bei komplexeren Animationen: Wenn Sie nur ''40%'' und ''80%'' definieren, interpoliert der Browser den Rest automatisch. Dieser **Partial Keyframes-Trick** spart Code, wenn der Startwert dem CSS-Default des Elements entspricht. Er funktioniert auch bei komplexeren Animationen: Wenn Sie nur ''40%'' und ''80%'' definieren, interpoliert der Browser den Rest automatisch.
  
Zeile 72: Zeile 75:
  
 Ohne ''fill-mode'' springt das Element nach der Animation auf seinen ursprünglichen Zustand zurück: Ohne ''fill-mode'' springt das Element nach der Animation auf seinen ursprünglichen Zustand zurück:
 +<WRAP center round box 80%>
 <code> <code>
 Zeit:     0ms ─────────── 400ms ────────── Zeit:     0ms ─────────── 400ms ──────────
Zeile 85: Zeile 88:
 } }
 </code> </code>
 +</WRAP>
  
 +<WRAP center round box 80%>
 ^ Wert         ^ Bedeutung                                               ^ ^ Wert         ^ Bedeutung                                               ^
 | ''none''     | Standard: springt nach der Animation zurück             | | ''none''     | Standard: springt nach der Animation zurück             |
Zeile 91: Zeile 96:
 | ''backwards''| Nimmt den Start-Zustand bereits während ''delay'' an    | | ''backwards''| Nimmt den Start-Zustand bereits während ''delay'' an    |
 | ''both''     | Kombination: ''forwards'' + ''backwards''               | | ''both''     | Kombination: ''forwards'' + ''backwards''               |
 +</WRAP>
  
 ===== animation-delay: Gestaffelte Animationen ===== ===== animation-delay: Gestaffelte Animationen =====
  
 Mit ''animation-delay'' können mehrere Elemente zeitversetzt starten — der sogenannte **Stagger-Effekt**: Mit ''animation-delay'' können mehrere Elemente zeitversetzt starten — der sogenannte **Stagger-Effekt**:
 +<WRAP center round box 80%>
 <code css> <code css>
 /* Fester Delay pro Element: */ /* Fester Delay pro Element: */
Zeile 103: Zeile 108:
 .item:nth-child(3) { animation-delay: 200ms; } .item:nth-child(3) { animation-delay: 200ms; }
 </code> </code>
 +</WRAP>
  
 Eleganter mit CSS Custom Properties — der Index wird per ''style''-Attribut übergeben: Eleganter mit CSS Custom Properties — der Index wird per ''style''-Attribut übergeben:
 +<WRAP center round box 80%>
 <code css> <code css>
 .item { .item {
Zeile 113: Zeile 119:
 } }
 </code> </code>
 +</WRAP>
 In Vue.js kann der Index aus ''v-for'' direkt als CSS-Variable übergeben werden: In Vue.js kann der Index aus ''v-for'' direkt als CSS-Variable übergeben werden:
 +<WRAP>
 <code html> <code html>
 <div <div
Zeile 124: Zeile 130:
 > >
 </code> </code>
 +</WRAP>
 > **Wichtig:** Stagger-Animationen mit ''animation-delay'' brauchen ''animation-fill-mode: backwards'' oder ''both'', damit die Elemente während der Wartezeit noch im Startzustand (z. B. ''opacity: 0'') bleiben und nicht kurz sichtbar aufblitzen. > **Wichtig:** Stagger-Animationen mit ''animation-delay'' brauchen ''animation-fill-mode: backwards'' oder ''both'', damit die Elemente während der Wartezeit noch im Startzustand (z. B. ''opacity: 0'') bleiben und nicht kurz sichtbar aufblitzen.
  
Zeile 131: Zeile 137:
  
 ==== Spinner (Rotation) ==== ==== Spinner (Rotation) ====
 +<WRAP center round box 80%>
 <code css> <code css>
 @keyframes spin { @keyframes spin {
Zeile 146: Zeile 152:
 } }
 </code> </code>
 +</WRAP>
 ''linear'' ist bei Spinners entscheidend: Ein ''ease-in-out'' würde das Drehen ungleichmässig wirken lassen. ''linear'' ist bei Spinners entscheidend: Ein ''ease-in-out'' würde das Drehen ungleichmässig wirken lassen.
  
 ==== Bounce Dots ==== ==== Bounce Dots ====
 +<WRAP center round box 80%>
 <code css> <code css>
 @keyframes bounce { @keyframes bounce {
Zeile 168: Zeile 174:
 .dot:nth-child(3) { animation-delay: 0.4s; } .dot:nth-child(3) { animation-delay: 0.4s; }
 </code> </code>
 +</WRAP>
  
 Die ''0%''- und ''100%''-Keyframes sind identisch — das sorgt für eine fliessende, endlose Wiederholung ohne abrupten Sprung. Die ''0%''- und ''100%''-Keyframes sind identisch — das sorgt für eine fliessende, endlose Wiederholung ohne abrupten Sprung.
Zeile 174: Zeile 181:
  
 Eine laufende Animation kann per CSS oder JavaScript pausiert werden: Eine laufende Animation kann per CSS oder JavaScript pausiert werden:
 +<WRAP center round box 80%>
 <code css> <code css>
 /* Per CSS – z. B. bei Hover: */ /* Per CSS – z. B. bei Hover: */
Zeile 188: Zeile 195:
 </code> </code>
  
 +</WRAP>
 ===== Performance-Hinweis ===== ===== Performance-Hinweis =====
  
 Animieren Sie wenn immer möglich nur ''transform'' und ''opacity''. Diese Properties werden direkt auf der GPU berechnet und lösen kein teures **Reflow** (Neuberechnung des Layouts) aus: Animieren Sie wenn immer möglich nur ''transform'' und ''opacity''. Diese Properties werden direkt auf der GPU berechnet und lösen kein teures **Reflow** (Neuberechnung des Layouts) aus:
 +<WRAP center round box 80%>
 <code css> <code css>
 /* ✅ Performant — GPU-beschleunigt: */ /* ✅ Performant — GPU-beschleunigt: */
Zeile 205: Zeile 213:
 } }
 </code> </code>
 +</WRAP>
  
 ===== Weiterführende Ressourcen ===== ===== Weiterführende Ressourcen =====
  • de/modul/m291/learningunits/lu12/theorie/b_keyframes.1779056398.txt.gz
  • Zuletzt geändert: 2026/05/18 00:19
  • von gkoch