الفرق بين المراجعتين لصفحة: «CSS/transition-delay»
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
لا ملخص تعديل |
||
(1 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) | |||
سطر 2: | سطر 2: | ||
الخاصية <code>transition-delay</code> في CSS تُحدِّد الزمن الذي يجب انتظاره بين وقوع الحدث الذي سيؤدي إلى بدء تأثير الانتقال وبين بداية التأثير. | الخاصية <code>transition-delay</code> في CSS تُحدِّد الزمن الذي يجب انتظاره بين وقوع الحدث الذي سيؤدي إلى بدء تأثير الانتقال وبين بداية التأثير. | ||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
سطر 29: | سطر 20: | ||
|كما حُدِّدَت. | |كما حُدِّدَت. | ||
|} | |} | ||
القيمة <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> فستهمل بعض قيم هذه الخاصية. | |||
== أمثلة == | == أمثلة == | ||
سطر 101: | سطر 103: | ||
تقبل الخاصية <code>transition-delay</code> قيمةً واحدةً أو عدِّة قيم لترتبط مع أكثر من خاصية تخضع لتأثير الانتقال. | تقبل الخاصية <code>transition-delay</code> قيمةً واحدةً أو عدِّة قيم لترتبط مع أكثر من خاصية تخضع لتأثير الانتقال. | ||
=== | === <code>[[CSS/time|<nowiki><time></nowiki>]]</code> === | ||
الزمن الذي يجب انتظاره بين تغيير قيمة الخاصية (عند وقوع حدث ما) وبداية تأثير الانتقال. | الزمن الذي يجب انتظاره بين تغيير قيمة الخاصية (عند وقوع حدث ما) وبداية تأثير الانتقال. | ||
سطر 109: | سطر 111: | ||
</syntaxhighlight> | </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>. | |||
== مصادر ومواصفات == | == مصادر ومواصفات == |
المراجعة الحالية بتاريخ 10:41، 9 سبتمبر 2018
الخاصية transition-delay
في CSS تُحدِّد الزمن الذي يجب انتظاره بين وقوع الحدث الذي سيؤدي إلى بدء تأثير الانتقال وبين بداية التأثير.
بطاقة الخاصية
القيمة الابتدائية | 0s
|
---|---|
تُطبَّق على | جميع العناصر. |
قابلة للوراثة | لا |
قابلة للتحريك | لا |
القيمة المحسوبة | كما حُدِّدَت. |
القيمة 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
فستهمل بعض قيم هذه الخاصية.
أمثلة
مثال يوضح تأثير قيمة الخاصية 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>#;
انظر أيضًا
- صفحة الخاصية
transition
وصفحة الخاصيات الفرعية التي تضبطها هذه الخاصية وهيtransition-duration
وtransition-property
وtransition-timing-function
.
مصادر ومواصفات
- مسودة CSS Transitions.