خصائص animation-timing-function CSS

التعريف والاستخدام

animation-timing-function تحديد خطوط السرعة للأنميات.

تعريف خطوط السرعة لتعريف الوقت المستغرق في تحويل الأنميات من مجموعة من الأنماط CSS إلى مجموعة أخرى.

الخطوط السريعة تجعل التغيرات أكثر سلاسة.

يرجى الرجوع إلى:

دليل CSS3:CSS حركة

دليل HTML DOM:خصائص animationTimingFunction

مثال

مثال 1

تقديم الأنميات من البداية إلى النهاية بسرعة ثابتة:

div
{
animation-timing-function:2s;
}

تجربة بنفسك

مثال 2

للتفكير بشكل أفضل في قيم الوظائف الزمنية المختلفة، تم تقديم خمس عناصر 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;}

تجربة بنفسك

مثال 3

مثل المثال السابق، ولكن يتم تعريف مسار السرعة من خلال وظيفة cubic-bezier:

#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);}

تجربة بنفسك

قواعد اللغة CSS

animation-timing-function: value;

يستخدم animation-timing-function وظيفة الرياضياتية المعروفة باسم function cubic-bezier لإنشاء مسار السرعة. يمكنك استخدام القيم الخاصة بك في هذه الوظيفة، أو القيم المسبقة:

القيمة الوصف الاختبار
linear سرعة التحركية ثابتة من البداية إلى النهاية. الاختبار
سهلة افتراضي. تبدأ التحركية ببطء، ثم تتسارع، وتبطئ قبل التوقف. الاختبار
ease-in التحركية تبدأ ببطء. الاختبار
ease-out التحركية تنتهي ببطء. الاختبار
ease-in-out التحركية تبدأ ببطء وتنتهي ببطء. الاختبار
cubic-bezier(n,n,n,n) في وظيفة cubic-bezier، القيم الخاصة بك. القيم المحتملة هي أرقام من 0 إلى 1.

نصيحة:جرب استخدام القيم المختلفة في وظيفة "تجربة بنفسك" أدناه.

تفاصيل التقنية

القيمة الافتراضية: سهلة
التنسيق: لا
الإصدار: CSS3
قواعد اللغة الجافا سكربت: الجسم.style.animationTimingFunction="linear"

دعم المتصفح

الرقم في الجدول يوضح إصدار المتصفح الأولي الذي يدعم الخاصية الكاملة.

المسافات التي تحتوي على -webkit-،-moz- أو -o- تعبر عن إصدار الأولي الذي يستخدم الحرف المقدر.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
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-