خاصية transition
آخر تحديث: 2026-09-13
transition خاصية transition
الخاصية transition هي اختصار لـ transition-property و transition-duration و transition-timing-function و transition-delay. تتيح تغييرات سلسة ومتحركة بين قيم الخصائص عندما يتغير حالة العنصر — مثل :hover أو :focus — بدلًا من القفزات المفاجئة. من خلال تحديد الخاصية الهدف والمدة ومنحنى التنعيم والتأخير، يمكنك بسهولة إنشاء تأثيرات تفاعلية سلسة. وهي أداة أساسية لبناء التفاعلات الدقيقة في الويب الحديث.
| الفئة | |
|---|---|
| القيمة الأولية | all 0s ease 0s |
| موروث | لا |
| ينطبق على | جميع العناصر |
| نوع الحركة | shadow |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
transition: [ none | <single-transition> ]#;
/* <single-transition> = [ <property> | none ] || <time> || <easing-function> || <time> */⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
<single-transition># | القيمة | اختصار الانتقال: الخاصية والمدة ودالة التوقيت والتأخير |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| transition | ✓ v26 | ✓ v12 | ✓ v16 | ✓ v6.1 | ✓ v12.1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： إذا حُذفت دالة التوقيت، فالافتراضي هو ease؛ وإذا حُذف التأخير، فالافتراضي هو 0s. وتُفصل الانتقالات المتعددة بفواصل، فيمكن لكل خاصية أن يكون لها إعداد انتقال خاص بها.
تحذير： لا يمكن إجراء انتقال لكل الخصائص. فقط الخصائص ذات القيم الوسيطة — مثل color و opacity و transform — يمكنها التحرك؛ أما الخصائص غير المستمرة مثل display فلا يمكن إجراء انتقال لها.
❓ الأسئلة الشائعة
Qما الفرق بين خاصيتي CSS transition و animation؟
Aتحتاج transition إلى محفّز مثل :hover أو :focus لكي تعمل، وتنتقل بين حالتين فقط: القيمة الابتدائية والنهائية. أما animation فتعمل مع @keyframes لتعريف أي عدد من الإطارات المفتاحية، ويمكنها التشغيل التلقائي والتكرار والعكس والإيقاف المؤقت — وهي أقوى بكثير. باختصار: استخدم transition لتغييرات الحالة و animation للحركة المتسلسلة المعقدة.
Qكيف أطبّق الانتقال على بعض خصائص CSS فقط دون غيرها؟
Aاسرد الخصائص التي تريد تحريكها باستخدام transition-property، مثل transition-property: background, transform;. إذا لم تحددها، فالافتراضي هو all، فيشارك كل خاصية قابلة للحركة في الانتقال، ما قد ينتج حركة غير متوقعة وتكلفة أداء غير ضرورية. ومن الأفضل التصريح بالخصائص صراحة.
Qلماذا لا تعمل خاصية transition في CSS وكيف يمكنني إصلاحها؟
Aأربعة أسباب شائعة: الخاصية الهدف نفسها غير قابلة للحركة (مثل display أو font-family)؛ القيمة الابتدائية أو النهائية مفقودة فلا يجد المتصفح ما يُكمّل به الانتقال بين القيمتين؛ التصريح بـ transition داخل الفئة الزائفة التي يتغير فيها الحالة بدلًا من العنصر نفسه؛ أو ترتيب الاختصار خاطئ — يجب أن تسبق المدة التأخير.
Qانتقالي متقطع. ما الخصائص السيئة للانتقال؟
Aلا تجعل الانتقال يعمل على خصائص تُطلق إعادة التدفق وإعادة الرسم، مثل width و height و top و left و margin و font-size. وبدلًا من ذلك فضّل transform و opacity، اللتين تعملان على مسار التركيب ويتولاهما معالج الرسوم GPU، فتبقيا سلسين عند 60fps. إذا لزم الأمر، أضف will-change لإنشاء طبقة تركيب مسبقًا.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
