أداة الانتقالات Transitions

جرّب بنفسك

الإعدادات

المدة (ms)

Easing

حجم التأثير

CSS الناتج

.btn { transition: ... }

ملاحظة: الأفضل تحدد الخصائص بدل transition: all لتحسين الأداء.

المعاينة

مرّر الفأرة على الزر ثم اضغطه (active) لتلاحظ الفرق

ما هي الانتقالات (Transitions)؟

الانتقال يجعل تغيّر خاصية CSS يحدث تدريجيًا لا فجأة. بدل أن يقفز لون الزر عند مرور المؤشّر، ينساب خلال جزء من الثانية. هذه السلاسة الصغيرة هي الفرق بين موقع يبدو رخيصًا وآخر يبدو محترفًا.

الفكرة بسيطة: تخبر CSS «أيّ خاصية تتغيّر، وكم تستغرق». حين تتغيّر تلك الخاصية لاحقًا (بـ hover أو بإضافة صنف)، يتولّى المتصفّح الحركة بينهما تلقائيًا.

🔑 اربطها بشيء تعرفه

الفرق بين مفتاح كهرباء يُشعل الضوء فجأة، ومنظّم إضاءة (ديمر) يرفع الإضاءة تدريجيًا. الانتقال هو الديمر: نفس النتيجة النهائية، لكن الطريق إليها ناعم مريح للعين.

متى تستخدمها؟

تأثيرات المرور (hover)

تغيّر لون الزر أو حجمه بنعومة عند مرور المؤشّر.

القوائم المنسدلة

ظهور واختفاء سلس بدل قفزة مفاجئة.

تبديل الوضع الليلي

انتقال ناعم بين الفاتح والداكن يريح العين.

التركيز على الحقول

إبراز حقل الإدخال تدريجيًا عند النقر عليه.

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

الخاصية	ماذا تفعل؟	قيم شائعة
transition-property	أيّ خاصية تتحرّك.	all / color
transition-duration	مدّة الحركة.	0.3s / 300ms
transition-timing	إيقاع الحركة (تسارع/تباطؤ).	ease / linear
transition-delay	تأخير قبل بدء الحركة.	0s / 0.1s
transition (مختصر)	كل ما سبق في سطر واحد.	all 0.3s ease

مثال عملي

زرّ ينساب لونه وحجمه عند المرور:

.btn {
  background: #2563eb;
  transition: all 0.3s ease; /* أيّ تغيّر يحدث بنعومة */
}
.btn:hover {
  background: #1e40af;
  transform: scale(1.05); /* يكبر قليلًا */
}

السطر transition: all 0.3s ease هو السرّ: يجعل كل تغيّر لاحق (اللون، الحجم) ينساب خلال ثلث ثانية بإيقاع طبيعي. احذفه فيصير التغيّر قفزة.

أخطاء شائعة

1. استعمال transition: all على كل شيء: قد يبطئ الصفحة ويحرّك خصائص لم تقصدها. حدّد الخاصية حين تستطيع: transition: background 0.3s.
2. مدّة طويلة جدًا (أكثر من 0.5s للتفاعلات): تجعل الموقع يبدو بطيئًا كسولًا. التفاعلات السريعة بين 0.15s و0.3s.
3. وضع الانتقال على حالة :hover بدل العنصر الأصلي: فتحصل حركة عند الدخول لا عند الخروج. ضع transition على العنصر نفسه.

كيف تستفيد من الأداة أعلاه؟

بدّل المدّة ونوع الإيقاع (ease, linear, ease-in-out) في الأداة أعلاه، ومرّر المؤشّر لترى الفرق. لاحظ كيف تغيّر المدّة القصيرة والطويلة إحساسك بالموقع كلّه.

أسئلة شائعة

الانتقال (transition) يحرّك بين حالتين عند حدث (مثل hover). الحركة (animation) تصنع تسلسلًا متعدّد المراحل يعمل تلقائيًا وقد يتكرّر. الانتقال أبسط، والحركة أقوى.

للتفاعلات السريعة (أزرار، روابط): 0.15s–0.3s. للحركات الأكبر (قوائم، نوافذ): 0.3s–0.5s. أطول من ذلك يبدو بطيئًا.

linear سرعة ثابتة (تبدو آليّة)، وease تبدأ بطيئة ثم تسرع ثم تبطؤ (تبدو طبيعية كحركة الأشياء الحقيقية). ease الافتراضي وهو الأنسب غالبًا.

✨ الحركات

تسلسلات متعدّدة المراحل.

🎯 التوسيط

مواضع العناصر.

↔️ Flexbox

ترتيب العناصر.