code-crispies/lessons/de/06-transitions-animations.json

{
	"$schema": "../../schemas/code-crispies-module-schema.json",
	"id": "transitions-animations",
	"title": "CSS Animationen",
	"description": "Bringe Interaktivität in dein UI durch sanfte Eigenschaftsübergänge und Keyframe-gesteuerte Animationen.",
	"difficulty": "intermediate",
	"lessons": [
		{
			"id": "transitions-1",
			"title": "Einfache Transitions",
			"description": "Lerne, wie du <kbd>transition</kbd> auf Eigenschaften anwendest für sanfte Änderungen bei Zustandswechseln.<br><br><pre>transition: property duration;\n/* z.B. transition: background-color 0.3s; */</pre>",
			"task": "Füge <kbd>transition: background-color 0.3s</kbd> zu <kbd>.btn</kbd> hinzu, damit die Farbe beim Hover sanft überblendet.",
			"previewHTML": "<button class=\"btn\">Hover mich</button>",
			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .btn { background: #6200ee; color: white; padding: 0.5rem 1rem; border: none; } .btn:hover { background: #3700b3; }",
			"sandboxCSS": "",
			"codePrefix": "/* Füge Transition hinzu */\n.btn {",
			"initialCode": "",
			"codeSuffix": "}",
			"solution": "  transition: background-color 0.3s;",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "contains",
					"value": "transition",
					"message": "Verwende die <kbd>transition</kbd> Eigenschaft",
					"options": { "caseSensitive": false }
				},
				{
					"type": "regex",
					"value": "transition:\\s*background-color\\s*0\\.3s",
					"message": "Setze <kbd>transition: background-color 0.3s</kbd>",
					"options": { "caseSensitive": false }
				}
			]
		},
		{
			"id": "transitions-2",
			"title": "Transition Timing-Funktionen",
			"description": "Erkunde Easing-Funktionen wie <kbd>ease</kbd>, <kbd>linear</kbd>, <kbd>ease-in</kbd>, <kbd>ease-out</kbd>, um das Animationstempo zu steuern.",
			"task": "Setze <kbd>transition-timing-function</kbd> auf <kbd>ease-in-out</kbd> bei <kbd>.btn</kbd>.",
			"previewHTML": "<button class=\"btn\">Timing</button>",
			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .btn { background: #6200ee; color: white; padding: 0.5rem 1rem; border: none; transition: background-color 0.3s; } .btn:hover { background: #03dac6; }",
			"sandboxCSS": "",
			"codePrefix": "/* Setze Timing-Funktion */\n.btn {",
			"initialCode": "",
			"codeSuffix": "}",
			"solution": "  transition-timing-function: ease-in-out;",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "contains",
					"value": "transition-timing-function",
					"message": "Verwende <kbd>transition-timing-function</kbd>",
					"options": { "caseSensitive": false }
				},
				{
					"type": "property_value",
					"value": { "property": "transition-timing-function", "expected": "ease-in-out" },
					"message": "Setze <kbd>transition-timing-function: ease-in-out</kbd>"
				}
			]
		},
		{
			"id": "transitions-3",
			"title": "Keyframe-Animationen Grundlagen",
			"description": "Erstelle benannte Animationen mit <kbd>@keyframes</kbd> und wende sie mit der <kbd>animation</kbd> Kurzschreibweise an.<br><br><pre>@keyframes bounce {\n  50% { transform: translateY(-20px); }\n}\n.ball {\n  animation: bounce 1s infinite;\n}</pre>",
			"task": "Definiere bei <kbd>50%</kbd> ein <kbd>transform: translateY(-20px)</kbd> und wende <kbd>animation: bounce 1s infinite</kbd> auf <kbd>.ball</kbd> an.",
			"previewHTML": "<div class=\"ball\"></div>",
			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .ball { width: 50px; height: 50px; background: #ff0266; border-radius: 50%; margin: 2rem auto; }",
			"sandboxCSS": "",
			"codePrefix": "/* Definiere Keyframes und wende Animation an */\n@keyframes bounce {",
			"initialCode": "",
			"codeSuffix": "}\n.ball { }",
			"solution": "  50% { transform: translateY(-20px); }\n}\n.ball {\n  animation: bounce 1s infinite;",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "contains",
					"value": "@keyframes bounce",
					"message": "Definiere <kbd>@keyframes bounce</kbd>",
					"options": { "caseSensitive": false }
				},
				{
					"type": "regex",
					"value": "50%.*transform: translateY\\(-20px\\)",
					"message": "Bei <kbd>50%</kbd>, setze <kbd>transform: translateY(-20px)</kbd>",
					"options": { "caseSensitive": false }
				},
				{
					"type": "contains",
					"value": "animation",
					"message": "Verwende <kbd>animation</kbd> Eigenschaft auf <kbd>.ball</kbd>",
					"options": { "caseSensitive": false }
				},
				{
					"type": "regex",
					"value": "animation:.*bounce.*1s.*infinite",
					"message": "Wende <kbd>animation: bounce 1s infinite</kbd> an",
					"options": { "caseSensitive": false }
				}
			]
		},
		{
			"id": "transitions-4",
			"title": "Animations-Eigenschaften im Detail",
			"description": "Verfeinere Animationen mit <kbd>animation-delay</kbd>, <kbd>animation-iteration-count</kbd>, <kbd>animation-direction</kbd> und <kbd>animation-fill-mode</kbd>.",
			"task": "Wende die <kbd>fade</kbd> Animation auf <kbd>.box</kbd> an mit <kbd>animation-name: fade</kbd>, <kbd>animation-duration: 2s</kbd>, <kbd>animation-delay: 1s</kbd>, <kbd>animation-iteration-count: 2</kbd> und <kbd>animation-fill-mode: forwards</kbd>.",
			"previewHTML": "<div class=\"box\">Fade Demo</div>",
			"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .box { width: 100px; height: 100px; background: #4caf50; margin: 2rem auto; }",
			"sandboxCSS": "",
			"codePrefix": "/* Definiere fade und setze Eigenschaften */\n@keyframes fade { from { opacity: 0; } to { opacity: 1; } }\n.box {",
			"initialCode": "",
			"codeSuffix": "}",
			"solution": "  animation-name: fade;\n  animation-duration: 2s;\n  animation-delay: 1s;\n  animation-iteration-count: 2;\n  animation-fill-mode: forwards;",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "contains",
					"value": "animation-delay",
					"message": "Verwende <kbd>animation-delay</kbd>",
					"options": { "caseSensitive": false }
				},
				{
					"type": "contains",
					"value": "animation-iteration-count",
					"message": "Verwende <kbd>animation-iteration-count</kbd>",
					"options": { "caseSensitive": false }
				},
				{
					"type": "contains",
					"value": "animation-fill-mode",
					"message": "Verwende <kbd>animation-fill-mode</kbd>",
					"options": { "caseSensitive": false }
				},
				{
					"type": "property_value",
					"value": { "property": "animation-duration", "expected": "2s" },
					"message": "Setze <kbd>animation-duration: 2s</kbd>"
				},
				{
					"type": "property_value",
					"value": { "property": "animation-delay", "expected": "1s" },
					"message": "Setze <kbd>animation-delay: 1s</kbd>"
				},
				{
					"type": "property_value",
					"value": { "property": "animation-iteration-count", "expected": "2" },
					"message": "Setze <kbd>animation-iteration-count: 2</kbd>"
				},
				{
					"type": "property_value",
					"value": { "property": "animation-fill-mode", "expected": "forwards" },
					"message": "Setze <kbd>animation-fill-mode: forwards</kbd>"
				}
			]
		}
	]
}