الفصل السابع التأثيرات الحركية (Transitions and Animations) في CSS

إليك كورس كامل عن التأثيرات الحركية (Transitions and Animations) في CSS:

1. مقدمة عن التأثيرات الحركية في CSS

• التأثيرات الحركية في CSS تُستخدم لإضافة حركات سلسة أثناء التفاعل مع العناصر في الصفحة.
• تُستخدم الانتقالات (Transitions) لتغيير حالة العنصر تدريجيًا عندما يتغير أحد خصائصه.
• تُستخدم الأنيميشن (Animations) لإنشاء تأثيرات حركية أكثر تعقيدًا مع تحكم أكبر في التحولات.

2. الانتقالات (Transitions)

• الانتقال يسمح لك بتغيير الخصائص من حالة إلى أخرى بمرور الوقت. على سبيل المثال، يمكن أن يتغير لون خلفية العنصر تدريجيًا عندما يقوم المستخدم بالمرور فوقه (hover).

أ. كيفية استخدام الانتقالات

• لتطبيق الانتقال على عنصر، يجب تحديد خاصية transition التي تحتوي على:
  • property: الخاصية التي ستحدث عليها الانتقال.
  • duration: مدة الانتقال (بالثواني أو المللي ثانية).
  • timing-function: دالة الزمن التي تحدد سرعة الانتقال.
  • delay: التأخير قبل بدء الانتقال.

مثال:

• في المثال السابق، عندما يمر المستخدم فوق العنصر .box، سيتغير لون الخلفية تدريجيًا من الأزرق إلى الأحمر في 0.5 ثانية.

3. القيم المتاحة لـ transition

• transition-property: يحدد الخصائص التي سيتم تطبيق الانتقال عليها (مثل: color, background-color, width).
  • مثال:
    css

    Copy code

    transition-property: background-color, width;

• transition-duration: يحدد الوقت الذي يستغرقه الانتقال (بوحدات مثل s للثواني و ms للملي ثانية).
  • مثال:
    css

    Copy code

    transition-duration: 0.5s;

• transition-timing-function: يحدد السرعة التي يحدث بها الانتقال.
  • القيم المتاحة:
    • linear: السرعة ثابتة طوال الانتقال.
    • ease (افتراضي): سرعة بطيئة في البداية والنهاية.
    • ease-in: بطيء في البداية.
    • ease-out: بطيء في النهاية.
    • ease-in-out: بطيء في البداية والنهاية.
  • مثال:
    css

    Copy code

    transition-timing-function: ease-in-out;

• transition-delay: يحدد الوقت الذي يجب أن ينتظر فيه الانتقال قبل أن يبدأ.
  • مثال:
    css

    Copy code

    transition-delay: 0.3s;


4. الأنيميشن (Animations)

• الأنيميشن في CSS يسمح بإنشاء تأثيرات حركية معقدة باستخدام @keyframes. يتيح لك هذا إنشاء تسلسل من الحركات عبر مجموعة من المراحل.

أ. كيفية استخدام الأنيميشن

• لتطبيق الأنيميشن، تحتاج إلى تحديد خصائص الأنيميشن على العنصر، مثل animation-name و animation-duration و animation-timing-function و animation-delay.

مثال:

• في المثال السابق، يتم تحريك العنصر .box من اليسار إلى اليمين عبر translateX خلال 2 ثانية بشكل مستمر (infinite).

5. القيم المتاحة لـ animation

• animation-name: يحدد اسم الأنيميشن (يجب أن يتطابق مع اسم الأنيميشن المحدد باستخدام @keyframes).
  • مثال:
    css

    Copy code

    animation-name: move;

• animation-duration: يحدد الوقت الذي يستغرقه الأنيميشن (بوحدات مثل s للثواني و ms للملي ثانية).
  • مثال:
    css

    Copy code

    animation-duration: 2s;

• animation-timing-function: يحدد كيفية تحرك العنصر خلال الأنيميشن (نفس القيم المتاحة لـ transition-timing-function مثل ease, linear, ease-in, ease-out).
  • مثال:
    css

    Copy code

    animation-timing-function: ease-in-out;

• animation-delay: يحدد الوقت الذي يجب أن ينتظر فيه الأنيميشن قبل أن يبدأ.
  • مثال:
    css

    Copy code

    animation-delay: 1s;

• animation-iteration-count: يحدد عدد مرات تكرار الأنيميشن.
  • مثال:
    css

    Copy code

    animation-iteration-count: infinite; /* لتكرار الأنيميشن للأبد */

• animation-direction: يحدد ما إذا كان الأنيميشن سيعود إلى وضعه الأصلي أم لا.
  • القيم المتاحة:
    • normal: الأنيميشن يبدأ من البداية كل مرة.
    • reverse: الأنيميشن يبدأ من النهاية في كل مرة.
    • alternate: يتبدل بين الاتجاهين.
    • alternate-reverse: يتبدل بين الاتجاهين لكن يبدأ من النهاية.
  • مثال:
    css

    Copy code

    animation-direction: alternate;


6. التحريك باستخدام @keyframes

• @keyframes يُستخدم لتعريف تسلسل الأنيميشن. يحدد تغييرات متعددة في خاصيات العنصر في أوقات مختلفة.

أ. كيفية كتابة @keyframes

• يحدد @keyframes المراحل المختلفة للأنيميشن.
• مثال:
  css

  Copy code

  @keyframes move {
  0% { transform: translateX(0); background-color: blue; }
  50% { transform: translateX(50px); background-color: yellow; }
  100% { transform: translateX(100px); background-color: red; }
  }

  .box {
width: 100px;
height: 100px;
animation: move 2s ease-in-out infinite;
}


• في المثال السابق، العنصر يبدأ من اللون الأزرق، ثم يتحول إلى الأصفر عند منتصف الأنيميشن، وينتهي باللون الأحمر.

7. استخدام التأثيرات الحركية مع الأحداث (Events)

• يمكن دمج التأثيرات الحركية مع أحداث المستخدم مثل hover, focus, click.

أ. مثال تأثير عند التمرير (Hover Effect)

• في المثال، عندما يمر المستخدم فوق العنصر، سيتم تدويره بمقدار 45 درجة.

8. أفضل الممارسات لتصميم التأثيرات الحركية

• استخدم التأثيرات الحركية بحذر: التأثيرات الحركية يجب أن تكون ناعمة وغير مزعجة. لا تفرط في استخدام الأنيميشن.
• جعل التأثيرات متجاوبة: تأكد من أن التأثيرات لا تؤثر سلبًا على تجربة المستخدم على الأجهزة المختلفة.
• استخدم التأثيرات عند الحاجة: استخدم التأثيرات الحركية لتعزيز التفاعل مع المستخدم أو لإضافة لمسة جمالية، لكن تأكد من أنها تضيف قيمة لتجربة المستخدم.

9. أمثلة عملية على الانتقالات والأنيميشن

أ. انتقال تدريجي على الخلفية عند المرور بالماوس (Hover Transition):

ب. تحريك العنصر باستخدام @keyframes:

10. ملخص الدرس

• تعلمنا كيفية استخدام الانتقالات (Transitions) لإنشاء تأثيرات سلسة عند التفاعل مع العناصر.
• تعلمنا كيفية استخدام الأنيميشن (Animations) لإنشاء تأثيرات حركية معقدة باستخدام @keyframes.
• قمنا بتطبيق أمثل