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

<noinclude>{{DISPLAYTITLE:الخاصية <code>transition-duration</code>}}</noinclude>
الخاصية <code>transition-duration</code> في CSS تُحدِّد الزمن الذي سيستغرقه تأثير الانتقال للوصول إلى القيمة النهائية للخاصية، والقيمة الافتراضية <code>0s</code> لن تؤدي إلى حدوث تأثير انتقال أبدًا.

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

يمكننا تحديد أكثر من قيمة لهذه الخاصية، وكل قيمة سترتبط بقيمة من قيم الخاصية <code>[[CSS/transition-property|transition-property]]</code>، وإذا كانت هنالك قيم في هذه الخاصية أقل من القيم المسندة للخاصية <code>[[CSS/transition-property|transition-property]]</code> فستُكرَّر قيم هذه الخاصية كي تكفي، وإذا كانت قيم هذه الخاصية أكثر من قيمة الخاصية <code>[[CSS/transition-property|transition-property]]</code> فستهمل بعض قيم هذه الخاصية.<nowiki/><syntaxhighlight lang="css">
/* <time> قيم */
transition-duration: 6s;
transition-duration: 120ms;
transition-duration: 1s, 15s;
transition-duration: 10s, 30s, 230ms;

/* القيم العامة */
transition-duration: inherit;
transition-duration: initial;
transition-duration: unset;
</syntaxhighlight>

== أمثلة ==
مثال يوضح تأثير قيمة الخاصية <code>transition-delay</code> على تأخير تأثير الانتقال:<syntaxhighlight lang="html">
<div class="parent">
  <div class="box zero"><code>transition-duration: 0s;</code></div>
</div>

<div class="parent">
  <div class="box one"><code>transition-duration: 1000ms;</code></div>
</div>

<div class="parent">
  <div class="box two"><code>transition-duration: 2s;</code></div>
</div>

</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
.parent { width: 250px; height:150px;}
.box {
  width: 220px;
  height: 100px;
  background-color: skyblue;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position:relative;
  transition-property: width, height, background-color, font-size, left, top, color;
  transition-delay: 0s;
  transition-timing-function: linear;
}

.box:hover {
  width: 110px;
  height: 50px;
  background-color: cadetblue;
  font-size: 10px;
  left: 100px;
  top: 100px;
  color: white;
}
    
.zero { transition-duration: 0s;}
.one { transition-duration: 1000ms; }
.two { transition-duration: 2s; }
</syntaxhighlight>

==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|1.0 (مع السابقة <code>-webkit-</code>)
26.0
|4.0 (مع السابقة <code>-moz-</code>)
16.0
|10
|11.5 (مع السابقة <code>-o-</code>)
12.1
|3.1 (مع السابقة <code>-webkit-</code>)
6.1
|}
== البنية العامة ==
تقبل الخاصية <code>transition-duration</code> قيمةً واحدةً أو عدِّة قيم لترتبط مع أكثر من خاصية تخضع لتأثير الانتقال.

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

لا يُسمَح باستخدام القيم السالبة مع هذه الخاصية.

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

</syntaxhighlight>

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