الفرق بين المراجعتين ل"CSS/animation-delay"
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
| سطر 72: | سطر 72: | ||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مسودة [https://drafts.csswg.org/css-animations/#animation-delay CSS Animations]. | * مسودة [https://drafts.csswg.org/css-animations/#animation-delay CSS Animations]. | ||
| − | [[تصنيف:CSS]] | + | [[تصنيف:CSS|{{SUBPAGENAME}}]] |
| − | [[تصنيف:CSS Property]] | + | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] |
| − | [[تصنيف:CSS Animations]] | + | [[تصنيف:CSS Animations|{{SUBPAGENAME}}]] |
مراجعة 15:41، 28 يناير 2018
الخاصية animation-delay في CSS تُحدِّد متى ستبدأ الحركة، ويمكنك تأخير بدء الحركة فترةً من الزمن، أو البدء مباشرةً، أو البدء مباشرةً لكن مع تجاوز جزء من دورة الحركة.
من الشائع استخدام الخاصية المختصرة animation لضبط جميع خاصيات الحركات بآنٍ واحد.
/* قيمة واحدة */
animation-delay: 3s;
animation-delay: 0s;
animation-delay: -1500ms;
/* عدِّة قيم */
animation-delay: 2.1s, 480ms;
/* القيم العامة */
animation-delay: inherit;
animation-delay: initial;
animation-delay: unset;
| القيمة الابتدائية | 0s
|
|---|---|
| تُطبَّق على | جميع العناصر. |
| قابلة للوراثة | لا |
| قابلة للتحريك | لا |
| القيمة المحسوبة | كما حُدِّدَت. |
دعم المتصفحات
| الميزة | 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.