خاصية مدة الحركة
آخر تحديث: 2026-09-13
animation-duration خاصية مدة الحركة
تضبط خاصية animation-duration المدة التي تستغرقها الحركة لإكمال دورة كاملة واحدة. القيم الأقصر تجعل الحركة أسرع؛ والقيم الأطول تجعلها أبطأ. وهي جزء من اختصار animation، وعند استخدامها بمفردها تتجاوز المدة المعيّنة بالاختصار.
| الفئة | |
|---|---|
| القيمة الأولية | 0s |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
animation-duration: <time>#;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
<time> | النوع | مدة الحركة |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| animation-duration | ✓ v43 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v30 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تحذير： القيمة الافتراضية هي 0s، مما يعني أن الحركة تكتمل فوراً ولا يظهر أي تأثير. عند استخدام اختصار animation، اضبط دائماً مدة أكبر من 0 صراحةً.
❓ الأسئلة الشائعة
Qهل يمكن لخاصية animation-duration استخدام أجزاء من الثانية في CSS؟
Aنعم. قيم مثل 0.5s و 0.25s و 150ms و 800ms كلها صالحة. بالنسبة للتفاعلات المصغّرة مثل تغذية الأزرار وإشارات التمرير، يكون 100ms إلى 300ms نمطياً — محسوساً ولكن ليس بطيئاً. وتعمل عادةً حركات الدخول على مستوى الصفحة من 300ms إلى 600ms. أما الحركات التي تتجاوز 1s فتجعل الانتظار محسوساً بوضوح وتناسب سيناريوهات التقدم أو التأكيد.
Qهل يمكن لحركات CSS مختلفة على نفس العنصر أن يكون لها مدد مختلفة؟
Aنعم. يقبل animation-duration قائمة مفصولة بفواصل، تُطابَق واحداً إلى واحد مع الأسماء في animation-name. على سبيل المثال، مع animation-name: a, b; animation-duration: 1s, 2s;، تعمل الحركة a لمدة 1s والحركة b لمدة 2s. وإذا كان عدد المدد أقل من الأسماء، تُعاد استخدام القيمة الأولى للناقصة.
Qماذا يحدث مع animation-duration: 0s؟ هل لا تزال الحركة تعمل؟
Aلا تُنتج حركة مرئية. تعني المدة 0s أن الحركة تكتمل فوراً ويقفز العنصر مباشرة إلى الإطار الرئيسي النهائي، وهو ما يكافئ عدم وجود حركة. والافتراضي لاختصار animation هو مدة 0s، لذا لن يُشغَّل animation: name; دون أي وقت — أعطِ الحركة دائماً مدة أكبر من 0.
Qما الفرق بين animation-duration و transition-duration؟
Aيضبط animation-duration المدة التي يستغرقها دورة كاملة واحدة لحركة @keyframes، بينما يضبط transition-duration المدة التي تستغرقها الانتقال للانتقال من قيمتها الأولية إلى النهائية بعد تغيّر في الحالة. كلاهما يقبل قيم الوقت والقوائم المفصولة بفواصل، ولكنهما يعملان على آليات مختلفة تماماً ولا يمكن أن يحل أحدهما محل الآخر.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
