خصائص transition-timing-function CSS

تعريف ووظيفة

تحديد سرعة تأثير الانتقال من خلال مسار السرعة.

تتيح هذه الخاصية لتغيير سرعة تأثير الانتقال مع مرور الوقت.

انظر أيضًا:

دليل CSS过渡 CSS

دليل HTML DOMخاصية transitionTimingFunction

مثال

مثال 1

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

div
{
transition-timing-function: linear;
}

تجربة شخصية

نص CSS

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);

قيمة الخاصية

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

نصيحة:يرجى تجربة القيم المختلفة في الأمثلة، مما يساعد على فهم كيفية عملها.

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

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

مزيد من الأمثلة

مثال 2

للتفهم أفضل للقيم المختلفة للوظائف، يرجى النظر في خمس عناصر div المختلفة التي تحتوي على خمس قيم مختلفة:

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

تجربة شخصية

مثال 3

مثل المثال السابق، لكنه يحدد مسار السرعة باستخدام cubic-bezier:

#div1 {transition-timing-function: cubic-bezier(0,0,1,1;}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

تجربة شخصية

دعم المتصفح

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

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

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-