Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m291:learningunits:lu13:theorie:c_keyframes [2026/05/31 23:21] – gkoch
+++ de:modul:m291:learningunits:lu13:theorie:c_keyframes [2026/06/01 00:22] (aktuell) – gkoch
@@ Zeile 1: / Zeile 1: @@
 ====== LU13c - CSS Keyframe-Animationen ======
+{{ :de:modul:m291:learningunits:lu13:theorie:keyframe_animation.gif?nolink | Keyframe Animationen}}
 Im Gegensatz zu Transitions laufen Keyframe-Animationen **eigenständig** – sie benötigen keinen Auslöser wie einen Klick oder Hover. Sie eignen sich für Ladeanimationen, Einblend-Effekte beim Seitenaufruf und dekorative Bewegungen.
 Ein einzelnes Bild aus einer Animation heisst ein **Frame**. Dabei werden Schlüsselframes (Keyframes) vorgegeben – vor allem Start und Ende – und alle Frames dazwischen werden vom Browser automatisch berechnet.
+===== Demo-Seite =====
+<WRAP center round box 80%>
+[[https://css-transitions-animations.vercel.app|{{ :de:modul:m291:learningunits:lu13:theorie:screenshot_2026-05-31_at_23.39.20.png?nolink&800 | Link zur Demo-Seite für Animationen}}]]
+[[https://css-transitions-animations.vercel.app|Demo-Seite mit Keyframe-Animationen]]
+</WRAP>
@@ Zeile 54: / Zeile 65: @@
 <WRAP center round box 80%>
 <code css>
-.kachel {
+.card {
     animation-name:             farbwechsel;
     animation-duration:         0.6s;
@@ Zeile 84: / Zeile 95: @@
 <WRAP center round box 80%>
 <code css>
-.kachel {
+.card {
-    animation: einblenden 0.6s ease 0.2s 1 normal both;
+    animation: farbwechsel 0.6s ease 0.2s 1 normal both;
     /*         Name       Dauer  Easing Delay Anzahl Richtung fill-mode */
 }
@@ Zeile 132: / Zeile 143: @@
 Mit ''fill-mode: both'' übernimmt das Element den ''from''-Zustand (''opacity: 0'') bereits während des Delays – kein Aufflackern.
+===== Weiterführende Ressourcen =====
+  * 📺 [[https://www.youtube.com/watch?v=CAK5kTApkMU|Kevin Powell – Simplifying CSS animations]] (5 Min., Englisch)
+  * 📖 [[https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes|MDN – @keyframes]]
+  * 📖 [[https://developer.mozilla.org/en-US/docs/Web/CSS/animation|MDN – animation (Shorthand)]]
+  * 📖 [[https://www.joshwcomeau.com/animation/keyframe-animations/|Josh W. Comeau – Keyframe Animations]] (sehr empfehlenswert)