أنشئ زراً يتغير لونه بسلاسة:

1. اللون الأساسي للخلفية أزرق.
2. عند مرور الماوس (hover)، يتغير اللون إلى أحمر.
3. يجب أن يستغرق التغيير 0.5 ثانية (duration).
4. استخدم دالة التوقيت (ease-in-out).

.btn {
    background-color: blue;
    transition: background-color 0.5s ease-in-out;
}

.btn:hover {
    background-color: red;
}

طبق التحويلات التالية على صورة عند مرور الماوس:

1. قم بتكبير الصورة بنسبة 1.2 (scale).
2. قم بتدوير الصورة 10 درجات (rotate).
3. حرك الصورة 20px لليمين (translate).

img:hover {
    transform: scale(1.2) rotate(10deg) translateX(20px);
}

أنشئ أنيميشن بسيط:

1. عرف `@keyframes` باسم "fadeIn".
2. يبدأ من شفافية 0 (opacity: 0) وينتهي بشفافية 1 (opacity: 1).
3. طبق الأنيميشن على عنصر (.box) لمدة 2 ثانية ويتكرر مرة واحدة.

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.box {
    animation: fadeIn 2s ease-in;
}

أنشئ تأثير قلب البطاقة (Flip Card):

1. أضف `perspective` للحاوية الأب (مثلاً 1000px).
2. قم بتدوير العنصر (.card) حول المحور Y بمقدار 180 درجة (rotateY) عند مرور الماوس.
3. استخدم `preserve-3d` للحفاظ على الأبعاد الثلاثية للأبناء.

.container {
    perspective: 1000px;
}

.card {
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.container:hover .card {
    transform: rotateY(180deg);
}

استخدم المتغيرات لتسهيل التعديل:

1. عرف متغيراً للون الرئيسي (`--main-color`) بقيمة "blue" في الجذر (`:root`).
2. استخدم هذا المتغير لتعيين لون الخلفية للزر ولون النص للعنوان.

:root {
    --main-color: blue;
}

button {
    background-color: var(--main-color);
}

h1 {
    color: var(--main-color);
}

اجعل عنصراً يدور حول نفسه باستمرار:

1. عرف `@keyframes` للدوران (rotate) من 0 إلى 360 درجة.
2. طبق الأنيميشن ليكون خطياً (linear) ولانهائياً (infinite) لمدة 2 ثانية.

@keyframes spin {
    to { transform: rotate(360deg); }
}

.loader {
    animation: spin 2s linear infinite;
}

أنشئ تأثيراً متتابعاً:

1. عند مرور الماوس، اجعل العرض (width) يتغير أولاً.
2. بعد انتهاء تغيير العرض (مثلاً 0.5s)، اجعل الارتفاع (height) يتغير.
3. استخدم خاصية `transition-delay` لتحقيق ذلك.

.box {
    transition: width 0.5s, height 0.5s 0.5s; /* تأخير الارتفاع 0.5s */
}

.box:hover {
    width: 200px;
    height: 200px;
}

طبق تأثيرات بصرية على صورة:

1. اجعل الصورة رمادية (grayscale) بنسبة 100%.
2. أضف ضبابية (blur) بمقدار 5px.
3. عند مرور الماوس، أزل هذه التأثيرات (عودة للأصل).

img {
    filter: grayscale(100%) blur(5px);
    transition: filter 0.3s;
}

img:hover {
    filter: none; /* أو grayscale(0) blur(0) */
}

غيّر شكل العنصر:

1. استخدم `clip-path` لجعل الصورة تظهر على شكل دائرة (circle).
2. أو اجعلها تظهر على شكل مضلع (polygon) مثلث.

/* دائرة */
.circle {
    clip-path: circle(50%);
}

/* مثلث */
.triangle {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

تحكم في مسار الأنيميشن:

1. اجعل الأنيميشن يعمل للأمام ثم يعود للخلف (alternate).
2. اجعل حالة العنصر تبقى كما هي عند انتهاء الأنيميشن (animation-fill-mode: forwards).

.box {
    animation-direction: alternate;
    animation-fill-mode: forwards;
}