Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m291:learningunits:lu13:theorie:c_keyframes [2026/05/31 23:40] – 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.
@@ Zeile 11: / Zeile 13: @@
 [[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/keyframes|Demo-Seite mit Keyframe-Animationen]]
+[[https://css-transitions-animations.vercel.app|Demo-Seite mit Keyframe-Animationen]]
 </WRAP>
@@ Zeile 63: / Zeile 65: @@
 <WRAP center round box 80%>
 <code css>
-.kachel {
+.card {
     animation-name:             farbwechsel;
     animation-duration:         0.6s;
@@ Zeile 142: / Zeile 144: @@
 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)