{
"$schema": "../../schemas/code-crispies-module-schema.json",
"id": "transitions-animations",
"title": "حركات CSS",
"description": "أضف التفاعل لواجهتك من خلال انتقالات الخصائص السلسة والحركات المبنية على keyframes.",
"difficulty": "intermediate",
"lessons": [
{
"id": "transitions-1",
"title": "Transitions",
"description": "تعلم كيفية تطبيق transition على الخصائص للتغييرات السلسة عند تغيير الحالة.transition: property duration;\n/* مثال: transition: background-color 0.3s; */ ",
"task": "أضف transition: background-color 0.3s ليتغير اللون بسلاسة عند التمرير.",
"previewHTML": "Hover Me ",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .btn { background: black; color: white; padding: 0.5rem 1rem; border: none; cursor: pointer; } .btn:hover { background: white; color: black; }",
"sandboxCSS": "",
"codePrefix": "/* Add transition */\n.btn {",
"initialCode": "",
"codeSuffix": "}",
"solution": " transition: background-color 0.3s;",
"previewContainer": "preview-area",
"validations": [
{
"type": "contains",
"value": "transition",
"message": "استخدم خاصية transition ",
"options": { "caseSensitive": false }
},
{
"type": "regex",
"value": "transition:\\s*background-color\\s*0\\.3s",
"message": "اضبط transition: background-color 0.3s ",
"options": { "caseSensitive": false }
}
]
},
{
"id": "transitions-2",
"title": "Timing Funcs",
"description": "استكشف دوال التسهيل مثل ease ، linear ، ease-in ، ease-out للتحكم في إيقاع الحركة.",
"task": "اضبط transition-timing-function على ease-in-out .",
"previewHTML": "Timing ",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .btn { background: navy; color: gold; padding: 0.5rem 1rem; border: none; cursor: pointer; transition: all 0.5s; } .btn:hover { background: gold; color: navy; transform: scale(1.1); }",
"sandboxCSS": "",
"codePrefix": "/* Set timing function */\n.btn {",
"initialCode": "",
"codeSuffix": "}",
"solution": " transition-timing-function: ease-in-out;",
"previewContainer": "preview-area",
"validations": [
{
"type": "contains",
"value": "transition-timing-function",
"message": "استخدم transition-timing-function ",
"options": { "caseSensitive": false }
},
{
"type": "property_value",
"value": { "property": "transition-timing-function", "expected": "ease-in-out" },
"message": "اضبط التوقيت على ease-in-out "
}
]
},
{
"id": "transitions-3",
"title": "Keyframes",
"description": "أنشئ حركات مسماة باستخدام @keyframes وطبّقها عبر اختصار animation .@keyframes bounce {\n 50% { transform: translateY(-20px); }\n}\n.ball {\n animation: bounce 1s infinite;\n} ",
"task": "عرّف keyframe عند 50% مع transform: translateY(-20px) وطبّق animation: bounce 1s infinite على .ball .",
"previewHTML": "
",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .ball { width: 50px; height: 50px; background: crimson; border-radius: 50%; margin: 2rem auto; }",
"sandboxCSS": "",
"codePrefix": "/* Define keyframes and apply animation */\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": "عرّف @keyframes bounce ",
"options": { "caseSensitive": false }
},
{
"type": "regex",
"value": "50%.*transform: translateY\\(-20px\\)",
"message": "عند 50% ، استخدم transform: translateY(-20px) ",
"options": { "caseSensitive": false }
},
{
"type": "contains",
"value": "animation",
"message": "استخدم خاصية animation على .ball ",
"options": { "caseSensitive": false }
},
{
"type": "regex",
"value": "animation:.*bounce.*1s.*infinite",
"message": "طبّق animation: bounce 1s infinite ",
"options": { "caseSensitive": false }
}
]
},
{
"id": "transitions-4",
"title": "Animation Properties",
"description": "اضبط الحركات بـ animation-delay ، animation-iteration-count ، animation-direction ، و animation-fill-mode .",
"task": "طبّق حركة pulse على .box مع animation-name: pulse ، animation-duration: 2s ، animation-delay: 1s ، animation-iteration-count: 2 ، و animation-fill-mode: forwards .",
"previewHTML": "Pulse
",
"previewBaseCSS": "body { font-family: sans-serif; padding: 1rem; } .box { width: 100px; height: 100px; background: black; color: white; display: flex; align-items: center; justify-content: center; margin: 2rem auto; } @keyframes pulse { 0% { background: black; color: white; transform: scale(1); } 50% { background: white; color: black; transform: scale(1.2); } 100% { background: limegreen; color: black; transform: scale(1); } }",
"sandboxCSS": "",
"codePrefix": "/* Apply animation properties */\n.box {",
"initialCode": "",
"codeSuffix": "}",
"solution": " animation-name: pulse;\n animation-duration: 2s;\n animation-delay: 1s;\n animation-iteration-count: 2;\n animation-fill-mode: forwards;",
"previewContainer": "preview-area",
"validations": [
{
"type": "property_value",
"value": { "property": "animation-name", "expected": "pulse" },
"message": "اضبط animation-name: pulse "
},
{
"type": "property_value",
"value": { "property": "animation-duration", "expected": "2s" },
"message": "اضبط animation-duration: 2s "
},
{
"type": "property_value",
"value": { "property": "animation-delay", "expected": "1s" },
"message": "اضبط animation-delay: 1s "
},
{
"type": "property_value",
"value": { "property": "animation-iteration-count", "expected": "2" },
"message": "اضبط animation-iteration-count: 2 "
},
{
"type": "property_value",
"value": { "property": "animation-fill-mode", "expected": "forwards" },
"message": "اضبط animation-fill-mode: forwards "
}
]
}
]
}