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

المراجعة الحالية بتاريخ 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>#;

انظر أيضًا

صفحة الخاصية animation والخاصيات الفرعية التي تضبطها هذه الخاصية وهي animation-name و animation-duration و animation-timing-function و animation-iteration-count و animation-direction و animation-fill-mode وanimation-play-state.

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

مسودة CSS Animations.

@@ سطر 71: / سطر 71: @@
 </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>.
 == مصادر ومواصفات ==