الفرق بين المراجعتين لصفحة: «CSS/animation-delay»

من موسوعة حسوب
< CSS
→ التعديل السابق
مرئينص الويكي
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}'
لا ملخص تعديل
 
(2 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:الخاصية <code>animation-delay</code>}}</noinclude>
<noinclude>{{DISPLAYTITLE:الخاصية <code>animation-delay</code>}}</noinclude>
الخاصية <code>animation-delay</code> في CSS تُحدِّد متى ستبدأ الحركة، ويمكنك تأخير بدء الحركة فترةً من الزمن، أو البدء مباشرةً، أو البدء مباشرةً لكن مع تجاوز جزء من دورة الحركة.  
الخاصية <code>animation-delay</code> في CSS تُحدِّد متى ستبدأ الحركة، ويمكنك تأخير بدء الحركة فترةً من الزمن، أو البدء مباشرةً، أو البدء مباشرةً لكن مع تجاوز جزء من دورة الحركة.


من الشائع استخدام الخاصية المختصرة <code>[[CSS/animation|animation]]</code> لضبط جميع خاصيات الحركات بآنٍ واحد.<nowiki/><syntaxhighlight lang="css">
== بطاقة الخاصية ==
/* قيمة واحدة */
animation-delay: 3s;
animation-delay: 0s;
animation-delay: -1500ms;
 
/* عدِّة قيم */
animation-delay: 2.1s, 480ms;
 
/* القيم العامة */
animation-delay: inherit;
animation-delay: initial;
animation-delay: unset;
</syntaxhighlight>
{| class="wikitable" style="width: 100%;"
{| class="wikitable" style="width: 100%;"
|-
|-
سطر 33: سطر 20:
|كما حُدِّدَت.
|كما حُدِّدَت.
|}
|}
من الشائع استخدام الخاصية المختصرة <code>[[CSS/animation|animation]]</code> لضبط جميع خاصيات الحركات بآنٍ واحد.<nowiki/><syntaxhighlight lang="css">
/* قيمة واحدة */
animation-delay: 3s;
animation-delay: 0s;
animation-delay: -1500ms;
/* عدِّة قيم */
animation-delay: 2.1s, 480ms;
/* القيم العامة */
animation-delay: inherit;
animation-delay: initial;
animation-delay: unset;
</syntaxhighlight>


== دعم المتصفحات ==
== دعم المتصفحات ==
سطر 57: سطر 59:
تقبل الخاصية <code>animation-delay</code> قيمةً واحدةً أو عدِّة قيم لترتبط مع أكثر من حركة.
تقبل الخاصية <code>animation-delay</code> قيمةً واحدةً أو عدِّة قيم لترتبط مع أكثر من حركة.


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


سطر 69: سطر 71:


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


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

المراجعة الحالية بتاريخ 08:31، 12 أغسطس 2018

الخاصية animation-delay في CSS تُحدِّد متى ستبدأ الحركة، ويمكنك تأخير بدء الحركة فترةً من الزمن، أو البدء مباشرةً، أو البدء مباشرةً لكن مع تجاوز جزء من دورة الحركة.

بطاقة الخاصية

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

من الشائع استخدام الخاصية المختصرة animation لضبط جميع خاصيات الحركات بآنٍ واحد.

/* قيمة واحدة */
animation-delay: 3s;
animation-delay: 0s;
animation-delay: -1500ms;

/* عدِّة قيم */
animation-delay: 2.1s, 480ms;

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

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

الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الأساسي 4.0 (مع السابقة -webkit-)

43.0

5.0 (مع السابقة -moz-)

16.0

10 15.0 (مع السابقة -webkit-)

30.0

5.1 (مع السابقة -webkit-)

9.0

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

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

<time>

الفارق الزمن منذ لحظة تطبيق الحركة على العنصر إلى اللحظة التي تبدأ فيها الحركة، ويمكن تحديد هذه القيمة بالثانية s أو بالملي ثانية ms، ويجب تحديد الواحدة.

القيم الموجبة تعني أنَّ الحركة ستبدأ بعد مضي الفترة الزمنية المُحدَّدة، والقيمة 0s الافتراضية تعني أنَّ الحركة ستبدأ فور تطبيقها.

القيم السالبة تؤدي إلى بدء الحركة مباشرةً، لكن مع تجاوز جزء من الحركة، لو حددنا القيمة ‎-1s فستبدأ الحركة مباشرةً لكنها ستتجاوز أوّل ثانية من دورة الحركة.

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

animation-delay: <time>#;

 انظر أيضًا

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

مجلوبة من «https://wiki.hsoub.com/index.php?title=CSS/animation-delay&oldid=14863»