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

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung		 Vorhergehende Überarbeitung
de:modul:m291:learningunits:lu12:theorie:b_keyframes [2026/05/18 00:25] – gkochde:modul:m291:learningunits:lu12:theorie:b_keyframes [2026/05/31 22:50] (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 100: Zeile 100:
 ===== 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 **Treppen-Effekt**:
 <WRAP center round box 80%> <WRAP center round box 80%>
 <code css> <code css>
Zeile 214: Zeile 214:
 </code> </code>
 </WRAP> </WRAP>
 +
 +===== Demo-Seite =====
 +
 +<WRAP center round box 80%>
 +
 +
 +[[https://css-transitions-animations.vercel.app|{{ :de:modul:m291:learningunits:lu12:theorie:screenshot_2026-05-28_at_04.56.44.png?nolink&800 | Link zur Demo-Seite für Animationen}}]]
 +[[https://css-transitions-animations.vercel.app|Demo-Seite mit Keyframe-Animationen und Transistions]]
 +</WRAP>
 +
  
 ===== Weiterführende Ressourcen ===== ===== Weiterführende Ressourcen =====
  • de/modul/m291/learningunits/lu12/theorie/b_keyframes.1779056731.txt.gz
  • Zuletzt geändert: 2026/05/18 00:25
  • von gkoch