عرض مصدر CSS/animation-duration

<noinclude>{{DISPLAYTITLE:الخاصية <code>animation-duration</code>}}</noinclude>
الخاصية <code>animation-duration</code> في CSS تُحدِّد الزمن اللازم لإكمال دورة كاملة من الحركة.

== بطاقة الخاصية ==
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|<code>0s</code>
|-
! scope="row" |تُطبَّق على
|جميع العناصر.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للتحريك
|لا
|-
! scope="row" |القيمة المحسوبة
|كما حُدِّدَت.
|}

من الشائع استخدام الخاصية المختصرة <code>[[CSS/animation|animation]]</code> لضبط جميع خاصيات الحركات بآنٍ واحد.<nowiki/><syntaxhighlight lang="css">
/* حركة واحدة */
animation-duration: 6s;
animation-duration: 120ms;

/* عدِّة حركات */
animation-duration: 1.64s, 15.22s;
animation-duration: 10s, 35s, 230ms;

/* القيم العامة */
animation-name: initial
animation-name: inherit
animation-name: unset
</syntaxhighlight>

== دعم المتصفحات ==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|4.0 (مع السابقة <code>-webkit-</code>)
43.0
|5.0 (مع السابقة <code>-moz-</code>)
16.0
|10
|15.0 (مع السابقة <code>-webkit-</code>)
30.0
|5.1 (مع السابقة <code>-webkit-</code>)
9.0
|}
== البنية العامة ==
تقبل الخاصية <code>animation-duration</code> قيمةً واحدةً أو عدِّة قيم لترتبط مع أكثر من حركة.

===  <code>[[CSS/time|<nowiki><time></nowiki>]]</code> ===
الزمن الذي تستغرقه دورة كاملة من الحركة لكي تتم، ويمكن تحديده بالثواني (<code>s</code>) أو بالملي ثانية (<code>ms</code>)، ويجب أن تكون القيمة موجبةً أو صفر (وإذا كانت صفر فيجب توفير الواحدة أيضًا).  <code>0s</code> تعني عدم تطبيق الحركة. 

=== البنية الرسمية ===
<syntaxhighlight lang="css">
animation-duration: <time>#;

</syntaxhighlight>

==  انظر أيضًا ==
* صفحة الخاصية <code>[[CSS/animation|animation]]</code> والخاصيات الفرعية التي تضبطها هذه الخاصية وهي <code>[[CSS/animation-name|animation-name]]</code> و <code>[[CSS/animation-timing-function|animation-timing-function]]</code> و <code>[[CSS/animation-delay|animation-delay]]</code> و <code>[[CSS/animation-iteration-count|animation-iteration-count]]</code> و <code>[[CSS/animation-direction|animation-direction]]</code> و <code>[[CSS/animation-fill-mode|animation-fill-mode]]</code> و<code>[[CSS/animation-play-state|animation-play-state]]</code>.

== مصادر ومواصفات ==
* مسودة [https://drafts.csswg.org/css-animations/#animation-duration CSS Animations]. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Animations|{{SUBPAGENAME}}]]