خاصية مدة الرسوم المتحركة في CSS
مثال
حدد أن الرسوم المتحركة يجب أن تكتمل دورة واحدة في 3 ثوانٍ:
div {
animation-duration: 3s;
}
التعريف والاستخدام
animation-duration
تحدد الخاصية المدة التي يجب أن تستغرقها الرسوم المتحركة لإكمال دورة واحدة .
القيمة الافتراضية: | 0 |
---|---|
وارث: | رقم |
متحرك: | رقم. اقرأ عن animatable |
الإصدار: | CSS3 |
بناء جملة JavaScript: | الكائن .style.animationDuration = "3s" |
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
الأرقام متبوعة بـ -webkit- أو -moz- أو -o- تحدد الإصدار الأول الذي يعمل مع بادئة.
Property | |||||
---|---|---|---|---|---|
animation-duration | 43.0 3.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
بنية CSS
animation-duration: time|initial|inherit;
قيم الملكية
Value | Description | Play it |
---|---|---|
time | Specifies the length of time an animation should take to complete one cycle. This can be specified in seconds or milliseconds. Default value is 0, which means that no animation will occur | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
الصفحات ذات الصلة
مرجع DOM HTML: خاصية AnimationDuration