CSS/transition-delay

الخاصية transition-delay في CSS تُحدِّد الزمن الذي يجب انتظاره بين وقوع الحدث الذي سيؤدي إلى بدء تأثير الانتقال وبين بداية التأثير.

القيمة 0s أو 0ms تُشير إلى أنَّ الحركة الانتقالية للخاصية ستبدأ مباشرةً عند وقوع الحدث، والقيم الموجبة ستؤدي إلى تأثير بداية تأثير الانتقال وفقًا للقيمة المُحدَّدة، والقيم السالبة ستؤدي إلى بدء تأثير الانتقال مباشرةً لكن مع جعله يبدو وكأنه قد بدأ من فترة (أي تبدأ الحركة ما بين قيمة البداية والنهاية للخاصية).

/* <time> قيم */
transition-delay: 3s;
transition-delay: 2s, 4ms;

/* القيم العامة */
transition-delay: inherit;
transition-delay: initial;
transition-delay: unset;

يمكننا تحديد أكثر من قيمة لهذه الخاصية، وكل قيمة سترتبط بقيمة من قيم الخاصية transition-property، وإذا كانت هنالك قيم في هذه الخاصية أقل من القيم المسندة للخاصية transition-property فستُكرَّر قيم هذه الخاصية كي تكفي، وإذا كانت قيم هذه الخاصية أكثر من قيمة الخاصية transition-property فستهمل بعض قيم هذه الخاصية.

القيمة الابتدائية	0s
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للتحريك	لا
القيمة المحسوبة	كما حُدِّدَت.

أمثلة

مثال يوضح تأثير قيمة الخاصية transition-delay على تأخير تأثير الانتقال:

<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>

شيفرة 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; }

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0 (مع السابقة -webkit-) 26.0	4.0 (مع السابقة -moz-) 16.0	10	11.5 (مع السابقة -o-) 12.1	3.1 (مع السابقة -webkit-) 6.1

البنية العامة

تقبل الخاصية transition-delay قيمةً واحدةً أو عدِّة قيم لترتبط مع أكثر من خاصية تخضع لتأثير الانتقال.

القيمة <time>

الزمن الذي يجب انتظاره بين تغيير قيمة الخاصية (عند وقوع حدث ما) وبداية تأثير الانتقال.

البنية الرسمية

transition-delay: <time>#;

مصادر ومواصفات

• مسودة CSS Transitions.