خاصية تأخير الرسوم المتحركة لـ CSS
مثال
ابدأ الرسم المتحرك بعد ثانيتين:
div {
animation-delay: 2s;
}
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
animation-delay
تحدد الخاصية تأخيرًا لبدء الرسم المتحرك .
يتم تحديد قيمة تأخير الرسوم المتحركة بالثواني (الثواني) أو بالمللي ثانية (مللي ثانية).
القيمة الافتراضية: | 0 ثانية |
---|---|
وارث: | رقم |
متحرك: | رقم. اقرأ عن animatable |
الإصدار: | CSS3 |
بناء جملة JavaScript: | الكائن .style.animationDelay = "1s" |
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
الأرقام متبوعة بـ -webkit- أو -moz- أو -o- تحدد الإصدار الأول الذي يعمل مع بادئة.
Property | |||||
---|---|---|---|---|---|
animation-delay | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
بنية CSS
animation-delay: time|initial|inherit;
قيم الملكية
Value | Description | Play it |
---|---|---|
time | Optional. Defines the number of seconds (s) or milliseconds (ms) to wait before the animation will start. Default value is 0. Negative values are allowed. If you use negative values, the animation will start as if it had already been playing for N seconds/milliseconds. | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
مزيد من الأمثلة
مثال
استخدام القيم السالبة. هنا ، ستبدأ الرسوم المتحركة كما لو كانت تعمل بالفعل لمدة ثانيتين:
div {
animation-delay: -2s;
}
الصفحات ذات الصلة
مرجع DOM HTML: خاصية AnimationDelay