جاري التحميل...

الانتقالات (Transitions) في CSS

ظل الصندوق أعطاك عمقاً هادئاً. الانتقالات تعطيك تغيّراً هادئاً عبر الزمن: زر يلين لونه عند المرور، بطاقة ترتفع قليلاً عند التركيز، رابط يتدرج لونه بدل القفز. ما زلت تكتب حالتين — والمتصفح يوسّط بينهما طوال المدة التي تضبطها.

ما هو الانتقال

الانتقال لا يخترع مظهراً جديداً بمفرده. يراقب خاصية تتغيّر أصلاً (غالباً عبر :hover أو :focus-visible أو صنف) ويحرّك ذلك التغيّر. بلا انتقال يكون القفز فورياً؛ معه تحصل على انزلاق قصير ومقروء.

الخصائص الأربع الطويلة هي transition-property وtransition-duration وtransition-timing-function وtransition-delay. معظم العمل اليومي يستخدم اختصار transition.

الخاصية والمدة

سمِّ ما يجوز أن يتحرك، وكم يستغرق التغيّر. المدد أزمنة (0.2s، 200ms). القصير والهادف أفضل من الانتظار المسرحي — تغذية واجهة المستخدم غالباً حول 150ms–300ms.

خلفية زر ناعمة عند المرور

css

.btn {
background: #2563eb;
color: #fff;
border: none;
padding: 0.75rem 1.25rem;
border-radius: 0.5rem;
transition-property: background-color, color;
transition-duration: 0.2s;
}

.btn:hover {
background: #1d4ed8;
color: #f8fafc;
}

ضع الانتقال على قاعدة الأساس حتى يتحرك الدخول والخروج من حالة المرور. سرد الخصائص المقصودة فقط يمنع قفزات التخطيط العرضية من الانزلاق لنصف ثانية.

المنحنى والتأخير

transition-timing-function يشكّل منحنى السرعة: ease (الإحساس الافتراضي)، linear، ease-in، ease-out، ease-in-out، أو cubic-bezier(...) مخصص. transition-delay ينتظر قبل بدء التغيّر — مفيد لقوائم متدرجة، وسهل المبالغة على زر واحد.

ease-out مقابل linear على الشفافية

css

.fade-panel {
opacity: 0.65;
transition: opacity 0.35s ease-out;
}

.fade-panel.is-bright {
opacity: 1;
}

.meter-bar {
width: 40%;
transition: width 0.4s linear;
}

.meter-bar.is-full {
width: 100%;
}

ease-out غالباً يبدو طبيعياً لظهور عناصر الواجهة. linear يناسب التقدّم الذي يجب أن يُقرأ ثابتاً. فضّل التأخير للتسلسلات المتعمّدة — لا لجعل كل نقرة متأخرة.

الاختصار والحركة متعددة الخصائص

الترتيب في الاختصار عادةً: الخاصية، المدة، دالة التوقيت، التأخير. يمكنك سرد عدة انتقالات مفصولة بفواصل. اجمع خصائص ودّية للرسم — transform وopacity عادةً أنعم من تحريك width أو height أو top أو margin.

رفع عند المرور بـ transform والظل

css

.card-lift {
background: #fff;
border-radius: 0.75rem;
box-shadow: 0 0.25rem 0.75rem rgba(15, 23, 42, 0.08);
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}

.card-lift:hover,
.card-lift:focus-visible {
transform: translateY(-0.25rem);
box-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.14);
}

هنا يلتقي عمق الدرس السابق بالحركة: الظل والرفع يشتركان في لحظة مرور واحدة. أبقِ المسافة صغيرة حتى تبقى الصفحة صلبة.

الحركة المخفّضة ومتى تستخدم الرسوم المتحركة بدلها

بعض الناس يفضّلون حركة أقل. احترم prefers-reduced-motion: reduce بتقصير أو تعطيل الانتقالات غير الأساسية. الانتقالات تتألق لتغيّرات الحالة من أ إلى ب. القصص الحلقية أو متعددة الخطوات تنتمي إلى CSS Animations (@keyframes) لاحقاً في هذه الوحدة — بعد Transforms.

جرّب بنفسك

أضف انتقال خلفية 0.2s لزر ومرّر عليه — ثم انقل transition من :hover إلى قاعدة الأساس وقارن سلوك مغادرة المرور.
حرّك opacity بـ ease-out عند تبديل صنف لوحة؛ جرّب linear ولاحظ الإحساس.
اجمع transform: translateY(...) مع box-shadow أنعم عند مرور البطاقة (خاصيتان، قائمة اختصار واحدة).
في DevTools، حاكِ prefers-reduced-motion: reduce وتأكد أن الحركة غير الأساسية تتراجع.
قاوِم تحريك height لقائمة مفتوحة في هذا التمرين — اترك تلك التجربة لأنماط لاحقة.

أخطاء شائعة

كتابة transition: all 1s فتنزلق كل خاصية، بما فيها التخطيط، لثانية كاملة
مدد متعددة الثواني تجعل الواجهة بطيئة
تحريك width / top / margin بينما يكفي transform أو opacity
تجاهل prefers-reduced-motion
توقّع أن الانتقال يتكرر إلى الأبد — ذلك مجال الرسوم المتحركة

ملخص

الانتقالات تُنعّم تغيّر الخصائص بين حالتين عبر مدة
تحكّم بالخاصية والمدة ودالة التوقيت والتأخير (أو استخدم اختصار transition)
فضّل حركة قصيرة على خصائص ودّية للرسم؛ ضع الانتقالات على قاعدة الأساس
احترم تفضيلات الحركة المخفّضة؛ استخدم رسوم @keyframes للحلقات والتسلسلات المعقّدة
التالي في Effects & Motion: Transforms

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى

اللغة