شرح الانتقالات (Transitions) والحركات (Animations) في Css

الانتقالات والحركات في CSS

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

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

الانتقالات هي تغييرات تدريجية تحدث لعنصر ما عند تغير حالته، مثل تغيير اللون أو الحجم أو الموضع. تُستخدم الانتقالات لجعل التغييرات تبدو أكثر سلاسة وطبيعية بدلاً من أن تكون فجائية.

خصائص الانتقالات:

• خاصية transition-property: تحدد الخاصية التي سيتم تطبيق الانتقال عليها، مثل color، background-color، width، height، إلخ.
• خاصية transition-duration: تحدد المدة الزمنية التي سيستغرقها الانتقال (بالثواني أو المللي ثانية).
• خاصية transition-timing-function: تحدد كيفية تقدم الانتقال بمرور الوقت، مثل ease، linear، ease-in، ease-out، إلخ.
• خاصية transition-delay: تحدد الوقت الذي ينتظره الانتقال قبل البدء.

مثال على الانتقال:

.button {
    background-color: blue;
    transition: background-color 0.5s ease;
}

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

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

الحركات (Animations)

الحركات تُستخدم لإنشاء تأثيرات حركية أكثر تعقيدًا من الانتقالات. تسمح الحركات بتعريف سلسلة من الإطارات (Keyframes) التي تحدد كيفية تغير خصائص العنصر بمرور الوقت.

خطوات إنشاء الحركات:

1. تعريف الإطارات الرئيسية (Keyframes):
   • تُستخدم @keyframes لتعريف سلسلة من التغييرات التي تحدث خلال الحركة.
   • يمكن تحديد النسب المئوية (مثل 0%، 50%، 100%) أو الكلمات المفتاحية (from، to).
2. تطبيق الحركة على العنصر:
   • تُستخدم خاصية animation لتطبيق الحركة على العنصر.
   • تشمل الخصائص الفرعية:
     • animation-name: اسم الحركة المحددة في @keyframes.
     • animation-duration: مدة الحركة.
     • animation-timing-function: تحدد كيفية تقدم الحركة بمرور الوقت.
     • animation-delay: التأخير قبل بدء الحركة.
     • animation-iteration-count: عدد مرات تكرار الحركة (محدود أو infinite).
     • animation-direction: اتجاه الحركة (normal، reverse، alternate، إلخ).
     • animation-fill-mode: تحدد حالة العنصر قبل وبعد الحركة.

مثال على الحركة:

@keyframes slide {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(100px);
    }
    100% {
        transform: translateX(0);
    }
}

.box {
    animation: slide 2s ease-in-out infinite;
}

في هذا المثال، يتحرك العنصر .box أفقيًا بمقدار 100 بكسل ثم يعود إلى موضعه الأصلي، ويتكرر هذا الإجراء إلى ما لا نهاية.

الفرق بين الانتقالات والحركات:

الانتقالات (Transitions)	الحركات (Animations)
تُستخدم لتغييرات بسيطة بين حالتين.	تُستخدم لتأثيرات حركية معقدة ومتعددة الخطوات.
تعتمد على تغيير خاصية واحدة أو أكثر.	تعتمد على سلسلة من الإطارات الرئيسية (Keyframes).
تبدأ عند تغيير حالة العنصر (مثل hover).	يمكن أن تبدأ تلقائيًا أو عند حدث معين.
محدودة في التعقيد.	أكثر مرونة وقابلة للتخصيص.

استخدامات الانتقالات والحركات:

• تحسين تجربة المستخدم: تجعل الواجهات أكثر تفاعلية وسلاسة.
• جذب الانتباه: يمكن استخدام الحركات لإبراز عناصر مهمة.
• تحسين الأداء: الانتقالات والحركات المُحسنة يمكن أن تجعل التطبيقات تبدو أسرع وأكثر استجابة.

نصائح لاستخدام الانتقالات والحركات:

• لا تُفرط في الاستخدام: كثرة الحركات قد تشتت المستخدم.
• تحسين الأداء: استخدم خصائص مثل transform و opacity بدلاً من width و height لتحقيق حركات أكثر سلاسة.
• التوافق مع الأجهزة: تأكد من أن الحركات تعمل بشكل جيد على جميع الأجهزة والمتصفحات.

الخلاصــــة

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