الخاصية animation-delay
الخاصية 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>#;
انظر أيضًا
- صفحة الخاصية
animationوالخاصيات الفرعية التي تضبطها هذه الخاصية وهيanimation-nameوanimation-durationوanimation-timing-functionوanimation-iteration-countوanimation-directionوanimation-fill-modeوanimation-play-state.
مصادر ومواصفات
- مسودة CSS Animations.