خاصية وظيفة توقيت الرسوم المتحركة في CSS
مثال
قم بتشغيل الرسوم المتحركة بنفس السرعة من البداية إلى النهاية:
div {
animation-timing-function: linear;
}
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
يحدد animation-timing-function
منحنى سرعة الرسم المتحرك.
يحدد منحنى السرعة الوقت الذي تستخدمه الرسوم المتحركة للتغيير من مجموعة أنماط CSS إلى أخرى.
يستخدم منحنى السرعة لإجراء التغييرات بسلاسة.
القيمة الافتراضية: | يسهل |
---|---|
وارث: | رقم |
متحرك: | رقم. اقرأ عن animatable |
الإصدار: | CSS3 |
بناء جملة JavaScript: | الكائن .style.animationTimingFunction = "linear" |
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
الأرقام متبوعة بـ -webkit- أو -moz- أو -o- تحدد الإصدار الأول الذي يعمل مع بادئة.
Property | |||||
---|---|---|---|---|---|
animation-timing-function | 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-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;
تستخدم وظيفة توقيت الرسوم المتحركة وظيفة رياضية ، تسمى منحنى بيزير المكعب ، لعمل منحنى السرعة. يمكنك استخدام القيم الخاصة بك في هذه الوظيفة ، أو استخدام إحدى القيم المحددة مسبقًا:
قيم الملكية
Value | Description | Play it |
---|---|---|
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 | |
step-start | Equivalent to steps(1, start) | |
step-end | Equivalent to steps(1, end) | |
steps(int,start|end) | Specifies a stepping function, with two parameters. The first parameter specifies the number of intervals in the function. It must be a positive integer (greater than 0). The second parameter, which is optional, is either the value "start" or "end", and specifies the point at which the change of values occur within the interval. If the second parameter is omitted, it is given the value "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 |
نصيحة: جرب القيم المختلفة في قسم "مزيد من الأمثلة" أدناه.
مزيد من الأمثلة
مثال
لفهم القيم المختلفة لدالة التوقيت بشكل أفضل ؛
فيما يلي خمسة عناصر <div> مختلفة بخمس قيم مختلفة:
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
مثال
مثل المثال أعلاه ، لكن منحنيات السرعة محددة بوظيفة البيزير المكعب:
#div1 {animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
الصفحات ذات الصلة
مرجع DOM HTML: خاصية AnimingTimingFunction