الفرق بين المراجعتين ل"CSS/animation-delay"
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
| سطر 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 تُحدِّد متى ستبدأ الحركة، ويمكنك تأخير بدء الحركة فترةً من الزمن، أو البدء مباشرةً، أو البدء مباشرةً لكن مع تجاوز جزء من دورة الحركة. |
| − | + | == بطاقة الخاصية == | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
{| 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>s</code> أو بالملي ثانية <code>ms</code>، ويجب تحديد الواحدة. | الفارق الزمن منذ لحظة تطبيق الحركة على العنصر إلى اللحظة التي تبدأ فيها الحركة، ويمكن تحديد هذه القيمة بالثانية <code>s</code> أو بالملي ثانية <code>ms</code>، ويجب تحديد الواحدة. | ||
مراجعة 09:46، 30 يوليو 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>#;
مصادر ومواصفات
- مسودة CSS Animations.