Animations (الرسوم المتحركة في CSS)

مقدمة

تعد الرسوم المتحركة في CSS إحدى الأدوات القوية التي تضيف الحياة والحركة إلى مواقع الويب، مما يعزز من تجربة المستخدم بشكل ملحوظ. يمكن استخدام الرسوم المتحركة لإنشاء تأثيرات بصرية مميزة وملفتة للنظر، بدءًا من الحركات البسيطة مثل تغيير الألوان، وصولاً إلى الحركات المعقدة مثل التنقل بين المواقع أو التدوير والتمدد.

في هذا الدرس، سنتعرف على كيفية إنشاء رسوم متحركة باستخدام @keyframes في CSS، وكيفية التحكم في السرعة والتأثير باستخدام animation-timing-function.

---

1. كيفية إنشاء الرسوم المتحركة باستخدام @keyframes

مفهوم @keyframes

تعد @keyframes القاعدة الأساسية التي تُستخدم لإنشاء الرسوم المتحركة. تساعدك هذه القاعدة في تحديد الخطوات أو المراحل المختلفة للرسوم المتحركة، بما يسمح لك بتحديد كيف سيبدو العنصر في نقاط زمنية محددة خلال مدة الحركة.

صيغة كتابة @keyframes

الصيغة الأساسية لـ @keyframes هي كالتالي:

@keyframes animation-name {
    from {
        /* الحالة الأولية للعنصر */
    }
    to {
        /* الحالة النهائية للعنصر */
    }
}

أو يمكن تقسيم المراحل أكثر باستخدام النسبة المئوية، حيث تشير إلى تقدم الحركة:

@keyframes animation-name {
    0% {
        /* الحالة الأولية للعنصر */
    }
    50% {
        /* حالة منتصف الرسوم المتحركة */
    }
    100% {
        /* الحالة النهائية للعنصر */
    }
}

مثال على @keyframes

لنقم بإنشاء رسم متحرك بسيط لتغيير لون عنصر وتحريكه من اليسار إلى اليمين.

@keyframes slideAndChangeColor {
    0% {
        background-color: blue;
        transform: translateX(0);
    }
    100% {
        background-color: green;
        transform: translateX(200px);
    }
}

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    animation: slideAndChangeColor 2s linear;
}

في هذا المثال، سيتم تغيير لون العنصر من الأزرق إلى الأخضر مع تحريكه إلى اليمين بمقدار 200 بكسل خلال ثانيتين.

---

2. خصائص الرسوم المتحركة في CSS

2.1. خاصية animation

تعتبر animation الخاصية المختصرة لتطبيق الرسوم المتحركة على عنصر معين، وتتضمن عدة إعدادات يمكن دمجها في خاصية واحدة:

animation: name duration timing-function delay iteration-count direction fill-mode;

حيث:

• name: اسم الرسوم المتحركة (الذي يُعرّف باستخدام @keyframes).
• duration: مدة الرسوم المتحركة (مثل 2s أو 500ms).
• timing-function: دالة التحكم في السرعة (مثل linear, ease, ease-in, ease-out).
• delay: تأخير بداية الرسوم المتحركة.
• iteration-count: عدد مرات تكرار الرسوم المتحركة (مثل infinite للتكرار اللامتناهي).
• direction: اتجاه الرسوم المتحركة (مثل normal, reverse).
• fill-mode: يحدد حالة العنصر بعد انتهاء الرسوم المتحركة.

2.2. خاصية animation-name

تحدد اسم الرسوم المتحركة المرتبطة بالعنصر، ويجب أن يكون هذا الاسم مطابقًا لاسم @keyframes الذي أنشأته.

animation-name: slideAndChangeColor;

2.3. خاصية animation-duration

تحدد مدة الرسوم المتحركة، أي المدة التي ستستغرقها الحركة للوصول إلى نهايتها.

animation-duration: 3s;

2.4. خاصية animation-timing-function

تحدد دالة التحكم في السرعة التي تحدد كيفية تقدم الرسوم المتحركة خلال وقتها. إليك بعض الخيارات الشائعة:

• linear: سرعة ثابتة طوال الرسوم المتحركة.
• ease: يبدأ ببطء، ثم يتسارع، ثم يتباطأ في النهاية.
• ease-in: يبدأ ببطء ويتسارع.
• ease-out: يبدأ بسرعة ثم يتباطأ.
• ease-in-out: يبدأ وينتهي ببطء.

مثال على دالة التحكم في السرعة

@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-50px);
    }
    100% {
        transform: translateY(0);
    }
}

.bouncing-box {
    width: 50px;
    height: 50px;
    background-color: red;
    animation: bounce 1s ease-in-out infinite;
}

في هذا المثال، سيقوم العنصر بالقفز لأعلى ولأسفل بسلاسة خلال ثانية واحدة، ويستمر في تكرار الحركة للأبد بفضل القيمة infinite في خاصية animation-iteration-count.

2.5. خاصية animation-delay

تضيف تأخيرًا قبل بدء الرسوم المتحركة. على سبيل المثال، تأخير لمدة ثانية واحدة:

animation-delay: 1s;

---

3. أمثلة عملية على الرسوم المتحركة

3.1. مثال على الانتقال الدوراني

لنقم بإنشاء تأثير دوران على عنصر معين.

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

.rotating-box {
    width: 100px;
    height: 100px;
    background-color: purple;
    animation: rotate 3s linear infinite;
}

3.2. مثال على تكبير وتصغير الحجم

يمكنك إنشاء تأثير تكبير وتصغير للحجم لجعل العنصر يبدو وكأنه ينبض.

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

.pulsing-box {
    width: 80px;
    height: 80px;
    background-color: #e74c3c;
    animation: pulse 1s ease-in-out infinite;
}

---

4. نصائح لاستخدام الرسوم المتحركة بفعالية

4.1. اجعل الرسوم المتحركة قصيرة ومناسبة

تجنب الرسوم المتحركة الطويلة التي قد تؤدي إلى إبطاء تجربة المستخدم.

4.2. استخدام الرسوم المتحركة لتحسين التفاعل

استخدم الرسوم المتحركة لتوجيه انتباه المستخدم، مثل الرسوم المتحركة التي تظهر عند الضغط على زر أو عند التمرير على عنصر.

4.3. استخدم الرسوم المتحركة بحذر

الرسوم المتحركة الزائدة قد تكون مربكة، لذلك استخدمها بطريقة متوازنة وهادفة.

---

خاتمة

تعتبر الرسوم المتحركة في CSS أداة قوية تساعد على تحسين تجربة المستخدم وإضافة لمسة جمالية وحيوية إلى واجهات المواقع. باستخدام @keyframes والخصائص المرتبطة بالرسوم المتحركة مثل animation-timing-function وanimation-duration، يمكنك إنشاء تأثيرات متنوعة تجعل الموقع تفاعليًا وجذابًا.