CSS Animationen und Transitionen

Modul: Web Engineering

Zweck

Dieses Repository enthält fünf Beispiele, die CSS-Transitionen und Animationen demonstrieren.

Beispiele

Nr.	Ordner	Thema	Was wird demonstriert
01	1-transitionsbasics	Transition-Eigenschaften	transition-property, -duration, -timing-function, -delay; Vergleich ohne vs. mit Transition
02	2-keyframes	@keyframes-Syntax	from/to- und Prozent-basierte Keyframes; animation-name, -duration, -iteration-count
03	3-timingfunctions	Timing-Funktionen	linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(); gleichzeitiger Vergleich
04	4-animatedelements	Praxisnahe UI-Elemente	Animierter Button, Lade-Spinner, Karten mit gestaffelter Eingangsanimation; Transitionen + Keyframes kombiniert
05	5-complexanimations	Fortgeschrittene Techniken	Mehrstufige Keyframes, animation-fill-mode, -direction, -delay, Verkettung mehrerer Animationen

Nutzung

1. Repository klonen oder herunterladen.
2. mainPage/index.html in einem Browser öffnen.