نمط الرسوم المتحركة توقيت خاصية الوظيفة
مثال
تغيير خاصية AnimationTimingFunction لعنصر <div>:
document.getElementById("myDIV").style.animationTimingFunction = "linear";
التعريف والاستخدام
تحدد وظيفة توقيت الرسوم المتحركة منحنى سرعة الرسم المتحرك.
يحدد منحنى السرعة الوقت الذي تستخدمه الرسوم المتحركة للتغيير من مجموعة أنماط CSS إلى أخرى.
يستخدم منحنى السرعة لإجراء التغييرات بسلاسة.
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
تحدد الأرقام التي يتبعها Moz الإصدار الأول الذي يعمل بالبادئة.
Property | |||||
---|---|---|---|---|---|
animationTimingFunction | 43.0 | 79.0 | 16.0 5.0 Moz |
9.0 | 30.0 |
بناء الجملة
إرجاع خاصية الرسوم المتحركةTimingFunction:
object.style.animationTimingFunction
قم بتعيين خاصية AnimingTimingFunction:
object.style.animationTimingFunction = "linear|ease|ease-in|ease-out|cubic-bezier(n, n, n, n)|initial|inherit"
قيم الملكية
Value | Description |
---|---|
linear | The animation has the same speed from start to end |
ease | Default value. The animation has a slow start, then fast, before it ends slowly |
ease-in | The animation has a slow start |
ease-out | The animation has a slow end |
ease-in-out | The animation has both a slow start and a slow end |
cubic-bezier(n, n, n, n) | Define your own values in the cubic-bezier function Possible values are numeric values from 0 to 1 |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
تفاصيل تقنية
القيمة الافتراضية: | يسهل |
---|---|
قيمة الإرجاع: | سلسلة ، تمثل خاصية Animation-time-function لعنصر |
إصدار CSS | CSS3 |
الصفحات ذات الصلة
مرجع CSS: خاصية وظيفة الرسوم المتحركة والتوقيت