{
"$schema": "../../schemas/code-crispies-module-schema.json",
"id": "transitions-animations",
"title": "Transitions & Animationen",
"description": "Bringe Interaktivität in dein UI durch sanfte Eigenschaftsübergänge und Keyframe-gesteuerte Animationen.",
"difficulty": "beginner",
"lessons": [
{
"id": "transitions-1",
"title": "Einfache Transitions",
"description": "Lerne, wie du transition auf Eigenschaften anwendest für sanfte Änderungen bei Zustandswechseln.",
"task": "Füge transition: background-color 0.3s zu .btn hinzu, damit die Farbe beim Hover sanft überblendet.",
"previewHTML": "",
"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": "}",
"previewContainer": "preview-area",
"validations": [
{ "type": "contains", "value": "transition", "message": "Verwende die transition Eigenschaft", "options": { "caseSensitive": false } },
{
"type": "regex",
"value": "transition:\\s*background-color\\s*0\\.3s",
"message": "Setze transition: background-color 0.3s",
"options": { "caseSensitive": false }
}
]
},
{
"id": "transitions-2",
"title": "Transition Timing-Funktionen",
"description": "Erkunde Easing-Funktionen wie ease, linear, ease-in, ease-out, um das Animationstempo zu steuern.",
"task": "Setze transition-timing-function auf ease-in-out bei .btn.",
"previewHTML": "",
"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": "}",
"previewContainer": "preview-area",
"validations": [
{
"type": "contains",
"value": "transition-timing-function",
"message": "Verwende transition-timing-function",
"options": { "caseSensitive": false }
},
{
"type": "property_value",
"value": { "property": "transition-timing-function", "expected": "ease-in-out" },
"message": "Setze transition-timing-function: ease-in-out"
}
]
},
{
"id": "transitions-3",
"title": "Keyframe-Animationen Grundlagen",
"description": "Erstelle benannte Animationen mit @keyframes und wende sie mit der animation Kurzschreibweise an.",
"task": "Definiere bei 50% ein transform: translateY(-20px) und wende animation: bounce 1s infinite auf .ball an.",
"previewHTML": "",
"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 { }",
"previewContainer": "preview-area",
"validations": [
{ "type": "contains", "value": "@keyframes bounce", "message": "Definiere @keyframes bounce", "options": { "caseSensitive": false } },
{
"type": "regex",
"value": "50%.*transform: translateY\\(-20px\\)",
"message": "Bei 50%, setze transform: translateY(-20px)",
"options": { "caseSensitive": false }
},
{ "type": "contains", "value": "animation", "message": "Verwende animation Eigenschaft auf .ball", "options": { "caseSensitive": false } },
{
"type": "regex",
"value": "animation:.*bounce.*1s.*infinite",
"message": "Wende animation: bounce 1s infinite an",
"options": { "caseSensitive": false }
}
]
},
{
"id": "transitions-4",
"title": "Animations-Eigenschaften im Detail",
"description": "Verfeinere Animationen mit animation-delay, animation-iteration-count, animation-direction und animation-fill-mode.",
"task": "Wende die fade Animation auf .box an mit animation-name: fade, animation-duration: 2s, animation-delay: 1s, animation-iteration-count: 2 und animation-fill-mode: forwards.",
"previewHTML": "Fade Demo
",
"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": "}",
"previewContainer": "preview-area",
"validations": [
{
"type": "contains",
"value": "animation-delay",
"message": "Verwende animation-delay",
"options": { "caseSensitive": false }
},
{
"type": "contains",
"value": "animation-iteration-count",
"message": "Verwende animation-iteration-count",
"options": { "caseSensitive": false }
},
{
"type": "contains",
"value": "animation-fill-mode",
"message": "Verwende animation-fill-mode",
"options": { "caseSensitive": false }
},
{ "type": "property_value", "value": { "property": "animation-duration", "expected": "2s" }, "message": "Setze animation-duration: 2s" },
{ "type": "property_value", "value": { "property": "animation-delay", "expected": "1s" }, "message": "Setze animation-delay: 1s" },
{
"type": "property_value",
"value": { "property": "animation-iteration-count", "expected": "2" },
"message": "Setze animation-iteration-count: 2"
},
{
"type": "property_value",
"value": { "property": "animation-fill-mode", "expected": "forwards" },
"message": "Setze animation-fill-mode: forwards"
}
]
}
]
}