خاصية Transition-property
آخر تحديث: 2026-09-13
transition-property خاصية Transition-property
تحدد خاصية transition-property أي خصائص CSS تُطبَّق عليها تأثير انتقال عند تغيّر قيمها. قيمتها الافتراضية هي all، مما يعني أن كل خاصية قابلة للتحريك تشارك في الانتقال؛ ويمكنك أيضاً سرد أسماء خصائص محددة صراحةً لتجنب تكلفة أداء غير ضرورية وسلوك حركة غير متوقع.
| الفئة | |
|---|---|
| القيمة الأولية | all |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
transition-property: none | all | <property>#;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
all | none | كلمة مفتاحية | كل الخصائص أو لا شيء |
<property> | النوع | الخاصية المراد انتقالها |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| transition-property | ✓ v26 | ✓ v12 | ✓ v16 | ✓ v6.1 | ✓ v12.1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تحذير： استخدام all ملائم، ولكن أي تغيير في أي خاصية قابلة للتحريك سيُطلق انتقالاً، مما قد يسبب تأثيرات غير متوقعة — حتى تغييرات font-size تتحرك. يُوصى بسرد الخصائص التي تحتاجها فعلاً.
❓ الأسئلة الشائعة
Qما الخصائص CSS التي يمكن لـ transition-property استهدافها للتحريك؟
Aفقط الخصائص القابلة للاستيفاء يمكن أن تنتقل — تلك ذات الحالات الرقمية الوسيطة، مثل color و opacity و transform و box-shadow و filter و width و height. أما الخصائص المتقطعة مثل display و visibility و font-family فلا يمكن تنعيمها وتقفز ببساطة بين الحالات.
Qما الهدف من تعيين transition-property إلى none؟
Aتعني none أن لا خاصية تشارك في أي انتقال، وهو ما يكافئ تعطيل الانتقالات على العنصر. تُستخدم عادةً لإيقاف الانتقالات مؤقتاً — مثلًا لمنع العناصر من الانزلاق من مواضعها الأولية عند أول تحميل للصفحة. كما يمكنها إعادة تعيين إعدادات الانتقال الموروثة من أصل أو ورقة أنماط عامة.
Qما فخاخ transition-property: all؟ ولماذا لا يوصى بـ all؟
Aيُحرك all كل خاصية قابلة للتحريك متى تغيرت، مما يُنشئ مشكلتين: تكلفة أداء، لأن تغييرات خصائص عرضية مثل font-size أو line-height تُحرك أيضاً؛ وسلوكاً صعب التحكم، مما يُنتج حركات تبدو غير مُدارة. وسرد الخصائص صراحةً أرخص وأسهل صيانة — ولا يصلح all إلا للمكوّنات الصغيرة جداً ذات خصائص قابلة للتحريك قليلة جداً.
Qلماذا لا يمكن انتقال أو تحريك القيمة height: auto؟
Aليس لـ height: auto قيمة وسيطة محددة، لذا لا يمكن للمتصفح الاستيفاء بين height: 0 و auto، وتقفز الحركة فجأة. وحيل بديلة شائعة: حيلة max-height، أو انتقال grid-template-rows من 0fr إلى 1fr لإظهار المحتوى، أو استخدام scaleY() مع transform-origin لتوسيع بصري.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
