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

<noinclude>{{DISPLAYTITLE:الخاصية <code>transition-delay</code>}}</noinclude>
الخاصية <code>transition-delay</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>0s</code> أو <code>0ms</code> تُشير إلى أنَّ الحركة الانتقالية للخاصية ستبدأ مباشرةً عند وقوع الحدث، والقيم الموجبة ستؤدي إلى تأثير بداية تأثير الانتقال وفقًا للقيمة المُحدَّدة، والقيم السالبة ستؤدي إلى بدء تأثير الانتقال مباشرةً لكن مع جعله يبدو وكأنه قد بدأ من فترة (أي تبدأ الحركة ما بين قيمة البداية والنهاية للخاصية).<nowiki/><syntaxhighlight lang="css">
/* <time> قيم */
transition-delay: 3s;
transition-delay: 2s, 4ms;

/* القيم العامة */
transition-delay: inherit;
transition-delay: initial;
transition-delay: unset;
</syntaxhighlight>يمكننا تحديد أكثر من قيمة لهذه الخاصية، وكل قيمة سترتبط بقيمة من قيم الخاصية <code>[[CSS/transition-property|transition-property]]</code>، وإذا كانت هنالك قيم في هذه الخاصية أقل من القيم المسندة للخاصية <code>[[CSS/transition-property|transition-property]]</code> فستُكرَّر قيم هذه الخاصية كي تكفي، وإذا كانت قيم هذه الخاصية أكثر من قيمة الخاصية <code>[[CSS/transition-property|transition-property]]</code> فستهمل بعض قيم هذه الخاصية.

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

<div class="parent">
  <div class="box one"><code>transition-delay: 1s;</code></div>
</div>

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

<div class="parent">
  <div class="box minus-one"><code>transition-delay: -1s;</code></div>
</div>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
.parent { width: 250px; height:150px;}
.box {
  width: 200px;
  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-duration: 2s;
  transition-timing-function: linear;
}

.box:hover {
  width: 100px;
  height: 50px;
  background-color: cadetblue;
  font-size: 10px;
  left: 100px;
  top: 100px;
  color: white;
}
    
.zero { transition-delay: 0s; }
.one { transition-delay: 1s; }
.two { transition-delay: 2s; }
.minus-one { transition-delay: -1s; }
</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-delay</code> قيمةً واحدةً أو عدِّة قيم لترتبط مع أكثر من خاصية تخضع لتأثير الانتقال.

===  <code>[[CSS/time|<nowiki><time></nowiki>]]</code> ===
الزمن الذي يجب انتظاره بين تغيير قيمة الخاصية (عند وقوع حدث ما) وبداية تأثير الانتقال.

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

</syntaxhighlight>

== انظر أيضًا ==
* صفحة الخاصية <code>[[CSS/transition|transition]]</code> وصفحة الخاصيات الفرعية التي تضبطها هذه الخاصية وهي  <code>[[CSS/transition-duration|transition-duration]]</code> و <code>[[CSS/transition-property|transition-property]]</code>و <code>[[CSS/transition-timing-function|transition-timing-function]]</code>.

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